CODEWITHSUNDEEP
css
Stefan Perju
Stefan Perju

Reputation: 298

CSS3 increase image on hover and display div

So, i have this fiddle. I want to hover over an image, zoom on it, and display over it the imageover div with an 0.6 opacity. This fiddle is what i've done so far. Any ideas?

<div class="imageover">
    <a href="google.com">
        <h1>TITLE</h1>  
        <h2>Name</h2>
     </a>
</div>

<div class="featured-image">
    <img src="http://media.npr.org/images/picture-show-flickr-promo.jpg" alt=""/>
</div>

Upvotes: 0

Views: 221

Answers (1)

Itay
Itay

Reputation: 16785

jsFiddle Demo

Enter the imageover div inside the feature-image div

.featured-image:hover .imageover {
    display:block;
    opacity: 0.6;
}

Upvotes: 2

Related Questions