How do I achieve this particular hover effect?


Tags: css,hover,transition

Problem :

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.



Solution :

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.


    CSS Howto..

    How to override inline CSS (specifically a div with certain class) with external CSS?

    how to change the height of a div dynamically based on another div using css?

    How to keep CSS style If I change the html content dynamically?

    CSS: How to display image icon before each h3 in CSS?

    How to set CSS property in adjacent elements?

    How would I reverse a css transition property width?

    How to make multiple breaks using CSS?

    How to apply CSS selector on Select Option Child

    Leaflet for R: How to change default CSS cluster classes

    How to increase a counter variable after a callback of a setTimeout-function?

    How do I make a play button for my full page video?

    How can I correctly type css float?

    Finding correct CSS sheet when Chrome Inspector shows (index) [closed]

    how to give multiple colors in the same cell in a full calendar?

    How to fix a div below the header after scrolling it up?

    How to get CSS font-weight to display?

    How to “reset” style in view page, set in css file

    How to Create hidden CSS?

    CSS isn't shown when HTML file is opened in Word

    How to remove top border for one element in a list

    Stack row 2x2 on Bootstrap using rows in same height… how?

    How to combine font-awesome and CSS triangles?

    How to set fixed auto width in tab-content bootstrap?

    How do I convert a text to css hex value?

    how to interactively toggle CSS sheets(s) on a webpage for testing/learning purposes?

    How to achieve a lightbox effect with css only? Example available

    How do I make effect like this on image hover?

    How to align social media icons in one row?

    How to center a div horizontally in a table using CSS

    How to target last row in a list with CSS?