How do I achieve this particular hover effect? - css

Question

I am trying to replicate this hover effect but I'm even sure where to start to be honest.
Here is my HTML code:
<div class="row">
<div class="col-sm-4 portfolio-item">
<a href="#" class="thumbnail">
<img src="img/portfolio/cabin.png">
</a>
</div>
<div class="col-sm-4 portfolio-item">
<a href="#" class="thumbnail">
<img src="img/portfolio/game.png">
</a>
</div>
<div class="col-sm-4 portfolio-item">
<a href="#" class="thumbnail">
<img src="img/portfolio/circus.png">
</a>
</div>
CSS: (all I have)
#portfolio .portfolio-item {
background-color: #18BC9C;
transition: all ease .5s;
-webkit-transition: all ease .5s;
}
#portfolio .portfolio-item:hover {
}
I don't even know where to begin. I think I need to fix something with the z-index and opacity but I don't know where to adjust it, and I'm also not sure where to put the transition effect. Everything I've tried has not worked so if someone could show me how to achieve that hover effect from a clean slate that would be greatly appreciated.

Answer 1

Hi this will get you started. First create an overlay opacity 0, then write a little jQuery so that on hover a class is applied opacity 1 with an rgba (rgb with opacity) and a css transition.
See the code for more, and run with this if you like I've separated the overlay from the image so you have control of them both:
$( document ).ready(function() {
$( '.portfolio-item' )
.mouseover(function() {
$( this ).find( '.overlay' ).addClass( 'show' );
})
.mouseout(function() {
$( this ).find( '.overlay' ).removeClass( 'show' );
});
});
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.col-sm-4 {
float: left;
width: 33%;
position: relative;
}
img {
width: 100%;
display: block;
}
.overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(145,0,0,0.5);
z-index: 2;
width: 100%;
height: auto;
opacity: 0;
-webkit-transition: .3s ease-in opacity;
-moz-transition: .3s ease-in opacity;
transition: .3s ease-in opacity;
}
.overlay.show {
opacity: 1;
}
.overlay.show:after {
content: 'x';
color: white;
position: absolute;
left: 50%;
margin-right: -50%;
top: 50%;
transform: translateY(-50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row">
<div class="col-sm-4 portfolio-item">
<div class="overlay"></div>
<a href="#" class="thumbnail">
<img src="http://placehold.it/100x50">
</a>
</div>
<div class="col-sm-4 portfolio-item">
<div class="overlay"></div>
<a href="#" class="thumbnail">
<img src="http://placehold.it/100x50">
</a>
</div>
<div class="col-sm-4 portfolio-item">
<div class="overlay"></div>
<a href="#" class="thumbnail">
<img src="http://placehold.it/100x50">
</a>
</div>

Answer 2

You can use a pseudo element ::after to create an overlay. Just use opacity: 0; to hide it, and show it on hover: opacity: 0.6;. As transition you can use: transition: opacity ease .5s;.
This way, you can create an color overlay over every image (would not be possible with only using background on the parent element). To create the magnifying glass, you can either use a <span> inside the <a> tag, or the other pseudo element ::before.
.portfolio-item a {
position: relative;
}
.portfolio-item a::after {
position: absolute;
top: 0;
left: 0;
content: "";
width: 100%;
height: 100%;
background: #457647;
opacity: 0;
transition: opacity ease .5s;
}
.portfolio-item a:hover::after {
opacity: 0.6;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-sm-4 portfolio-item">
<a href="#" class="thumbnail">
<img src="//placehold.it/200x100/fff">
</a>
</div>
<div class="col-sm-4 portfolio-item">
<a href="#" class="thumbnail">
<img src="//placehold.it/200x100/fff">
</a>
</div>
<div class="col-sm-4 portfolio-item">
<a href="#" class="thumbnail">
<img src="//placehold.it/200x100/fff">
</a>
</div>
</div>
Of course you have to use vendor prefixes for older browsers. Also make sure that your markup is valid - a closing div tag was missing.