Carson Clark Carson Clark - 13 days ago 5
CSS Question

How do I achieve this particular hover effect?

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

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.

Comments