JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <h3>Headline</h3>
    <div>
    <p><img src="http://placehold.it/300x200&text=image" /></p>
    <p>I tillegg til sprellende fersk sjømat og sunne ferdigretter, kan vi tilby helnorske produkter fra spennede småprodusenter. <a href="pagename.html">Les mer &gt;></a></p>
</div></div>

CSS

div {width:300px; position:relative;}

p {padding-top:10px; margin:0;}

p+p {-moz-transition:.3s ease-in-out opacity;
-o-transition:.3s ease-in-out opacity;
-webkit-transition:.3s ease-in-out opacity;
transition:.3s ease-in-out opacity;
background:#fff;
display:block;
margin:0 ;
height:100%;
left:0;
opacity:0;
position:absolute;
top:0;
width:95%;
padding:2% 5% 0 0;
}

div:hover p+p.open {opacity:1;}

JavaScript

$('body').hasClass('no-touch') ? event = 'mouseenter mouseleave' : event = 'click';
//!$('body').hasClass('no-touch') ? event = 'mouseenter mouseleave' : event = 'click';

$('div div').on(event, function() {
    $(this).find('p + p').toggleClass('open');
});