Pure CSS Image Hover with Slide Out Title Effect

In this article, We are featuring a great Image hover effect which builds with pure CSS. Basically, It’s a slide out title effect initialize when mouseover an image.

It is a beautiful example of effect which will add extra beauty on your website. It will help and add extra energy to your blog photos. It will also enhance the overall user experience.

Hope you will enjoy this useful animation and will implement your website.

It’s a really simple and cool effect and by default,t the text stay on the image. When the user hovers an image, It will slide out the text with a nice animation.

The demo included three different versions. All of them have the same animation but different in design. Also, each one has a unique color scheme.

This effect is attractive and looking good. You can easily understand the markup and implement on your webpage.

Let’s start with the tutorial….

The Markup

We start with simple markup. We created an effect by defining a figure element. There are three different classes for the unique color red, blue and yellow.

We place an image tag instead of a figure element. To add different text and heading, We add a figcaption.

This is the best markup to create an effect on images.

<figure class="snip1104 red">
    <img src="path/sample.jpg" alt="sample" />
    <figcaption>
    <h2>Jean  <span> Myers</span></h2>
    </figcaption>
    <a href="#"></a>
</figure>

The Style

To style the effect, We will first add some basic styling. We will add a font-family, background color, and some box-shadow.

But the important thing to be noted is to define min and max width to make it work on mobile.

figure.snip1104 {
  font-family: 'Raleway', Arial, sans-serif;
  position: relative;
  overflow: hidden;
  margin: 10px;
  min-width: 220px;
  max-width: 310px;
  max-height: 220px;
  width: 100%;
  background: #000000;
  color: #ffffff;
  text-align: center;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}

Next, We will apply the transition to the figure element.

figure.snip1104 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

Make sure an image resize properly on mobile. We will set max-width 100%.

figure.snip1104 img {
  max-width: 100%;
  position: relative;
  opacity: 0.4;
}

It’s time to overlay text on image. For this, We use the positioning element and set zero value for all it’s property to cover all space over an image.

figure.snip1104 figcaption {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

We will style the heading and will make background color skew.

figure.snip1104 h2 {
  position: absolute;
  left: 40px;
  right: 40px;
  display: inline-block;
  background: #000000;
  -webkit-transform: skew(-10deg) rotate(-10deg) translate(0, -50%);
  transform: skew(-10deg) rotate(-10deg) translate(0, -50%);
  padding: 12px 5px;
  margin: 0;
  top: 50%;
  text-transform: uppercase;
  font-weight: 400;
}

To add some nice background color over an image, We will use :before element.

figure.snip1104:before {
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  content: '';
  background: #ffffff;
  position: absolute;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -webkit-transform: rotate(110deg) translateY(-50%);
  transform: rotate(110deg) translateY(-50%);
}

On hover image element, We will use transform property with different values for figure and heading element.

figure.snip1104:hover img,
figure.snip1104.hover img {
  opacity: 1;
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
figure.snip1104:hover h2,
figure.snip1104.hover h2 {
  -webkit-transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%);
  transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%);
}
figure.snip1104:hover:before,
figure.snip1104.hover:before {
  -webkit-transform: rotate(110deg) translateY(-150%);
  transform: rotate(110deg) translateY(-150%);
}

That’s It. There are few more general styles like for color scheme etc. You can download the source file and see a demo.