Modern HTML/CSS Image Hover Effects

HTML/CSS Image Hover Effects

It’s time to create another set of image hover effects with plain HTML & CSS that have some great animation and new design. We included 14 modern and Subtle effect which stand out your site.

These modern effects will surely brighten up your website. We will create some creative animation using advanced CSS3 techniques.

The hover effects can also be created using Jquery, but it will affect your website speed. I will share pure CSS solution.

These effect developed using CSS3 transition and are easy to apply effects on any kind of website. You simply need to copy HTML code for specific effect and add style.css file. That’s It.

After CSS3 come in the market, Designing the website and its element gets easier for designers. You can build a beautiful and awesome looking effect quickly.

Nowadays, The web design trend a lot changed. The designers love to play with animations and CSS3 allows bringing something new in every website layout. Due to this trend, We think to create and share some creative modern item using CSS3.

How to Create Image Hover Effects with HTML/CSS

I will guide you about creating the first effect only. The process of creating another effect almost similar but of course the animation and little HTML change.

You can find all the rest of the effects in the demo and source file.

Let’s get started by making the effect.

We have a main wrapper class name bg-items which wrap with few of child’s divs. These child divs include a items div with a background image and a div which will show content when hovering an image.

Be aware that we are going to use an image as a background and add the class items for each background image. The markup will appear like this:

<div class="bg-items">
    <div class="items" style="background-image : url('img/baby-1399332_960_720.jpg');">
      <div class="one"></div>
      <div class="details">
        <h3>Effect #1</h3>
        <p>Fusce eros mauris, vehicula vel rhoncus id, accumsan at justo. Nulla nec ex mollis, rhoncus quam quis, feugiat quam. Donec auctor turpis ex, a pretium tellus mollis sed. Nam vehicula libero at nulla euismod.</p>
        <h6>Date: 5/5/2016</h6>
      </div>
    </div>
</div>

We also want to mention here, We should also add the primary container and all the image source will be inside. This container class named Hvcontainer

The Styling

For our CSS, We first need to add some common CSS that should use for each set of effects. We need to set a width of 48% to make 2 column design. Here you can change it and make it 3 columns quickly.

The div class name items should have relative positioning with the inline display.

I’ve also put some basic styles for H2 and P tags. In addition to the image tag, We can use a CSS3 transition to create a smooth impact.

.bg-items {
    cursor: pointer;
    display: inline-block;
    float: left;
    margin: 1%;
    width: 48%;
}
.items {
    background-color: #C97131;
    background-size: cover;
    height: 286px;
    overflow: hidden;
    position: relative;
    width: 100%;
}
.details {
    color: #fff;
    font-family: "Jaldi",sans-serif;
    font-size:25px;
    height: 286px;
    left: 0;
    opacity: 0;
    padding: 5%;
    top: 0;
    transition: opacity 0.8s ease 0s;
    width: 90%;
}
.opticy{
   background-color : rgba(0,0,0,0.5);	
}
.details h3 {
  margin-bottom : 20px;
}
.details h6 {
  text-align : right;
  margin-top : 40px;
}
.details p {
  font-size : 14px;
  font-style: italic;
  text-align: center;
  line-height : 20px;
}
.items:hover .details {
  opacity : 1;
  -webkit-transition: opacity .2s .3s;
  transition : opacity .2s .3s;
}
.items div {
  position : absolute;
}

To create an effect on hover, We will play with few design elements which include setting the values for position element and add some background color and also a transition that can change according to need.

On hover, We set left and bottom to be 0 to create this effect.

.one {
  left   : 100%;
  bottom : 100%;
  width : inherit;
  height: inherit;
  background-color : rgba(254, 219, 29, 0.7);
  -webkit-transition: all .3s;
  transition   : all .3s;
}
.items:hover .one {
  -webkit-transition: all .3s;
  transition   : all .3s;
  left   : 0;
  bottom : 0;
}

If you want to implement the second effect from the demo than here is code sample. This effect work similar to the first one but the left should be zero at the normal position but the bottom will be 100%. On-hover, both will be 0.

.two {
  width : inherit;
  height: inherit;
  background-color : rgba(254, 219, 29, 0.7);
  -webkit-transition: all .3s;
  transition   : all .3s;
  left   : 0;
  bottom : 100%;
}
.items:hover .two {
  -webkit-transform : rotate(180deg);
          transform : rotate(180deg);
  left   : 0;
  bottom : 0;
  -webkit-transition: all .3s;
  transition   : all .3s;
}

Please let us know how you find these useful resources and share with your friends.

Code ExamplesYou May Also Like