Image Hover Overlay Fade

Next Page >>
div class container

How to » Image Hover Overlay Fade

Study in this chapter:
1. - How to create image overlay hover effects.
2. - simple image hover effects with text - overlay fade
3. - How to use hover in image in CSS?

Learn how to make a fading overlay effect to an image, on hover.

We add CSS style to create Image Hover Overlay Fade as:
Internal Style - by using a <style> element in the <head> section
External Style - by using an external CSS file as style.css

Example:

Simple image hover effects with text

Simple Image overlay effect on hover

Example:

<!DOCTYPE html>

  <html>

  <head>

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <style>

  .container {

  position: relative;

  width: 50%;

  }
.image {

  opacity: 1;

  display: block;

  width: 100%;

  height: auto;

  transition: .5s ease;

  backface-visibility: hidden;

  }
.middle {

  transition: .5s ease;

  opacity: 0;

  position: absolute;

  top: 86%;

  left: 50%;

  transform: translate(-50%, -50%);

  -ms-transform: translate(-50%, -50%);

  text-align: center;

  }
.container:hover .image {

  opacity: 0.7;

  }
.container:hover .middle {

  opacity: 1;

  }
.text {

  background-color: #CCC;

  color: #333;

  font-size: 18px;

  padding: 10px 12px;

  font-weight: bold;

  }

  </style>

  </head>

  <body>
<h2>Fade in a box: Opacity 70% with Box without affecting the text</h2>

  <p>Hover over the image to see the effect.</p>
<div class="container">

  <img src="https://www.agernic.com/uploads/nice-france.jpg" alt="Avatar" class="image" style="width:100%">

  <div class="middle">

  <div class="text">Nice - France Nice view over<br />

  the coast of the sea</div>

  </div>

  </div>

  

  </body>

  </html>

Create an Image overlay effect on hover? - example

An interesting category of effects you can add to images on a web page are overlay effects. These effects are placed over images and are used in conjunction with a hover effect. Therefore, they only appear when the user hovers over the image.

<!DOCTYPE html>

  <html>

  <head>

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <style>

  .image {

  width: 350px;

  height: 250px;

  margin-left: 100px;

  }
.div {

  position: relative;

  width: 450px;

  }
.overlay {

  position: absolute;

  transition: all 0.9s ease;

  opacity: 0.2;

  }
.div:hover .overlay {

  opacity: 0.6;

  }
.FadeEffect {

  height: 250px;

  width: 350px;

  top: 0;

  left: 100px;

  background-color: whitesmoke;

  }

  </style>

  </head>
<body>

  <div class="div">

  <img src= "https://www.agernic.com/uploads/nice-france.jpg" class="image">

  <div class="overlay FadeEffect"></div>

  </div>

  

  </body>

  </html>

Tags: how to create image overlay hover effects, simple image hover effects with text - overlay fade, How to use hover in image in CSS?

Slide in Overlay from the Top

Example - How to make a Slide in Overlay from the Top

<!DOCTYPE html>

  <html>

  <head>

  <style>

  .container {

  position: relative;

  width: 50%;

  }
.image {

  display: block;

  width: 100%;

  height: auto;

  }
.overlay {

  position: absolute;

  bottom: 100%;

  left: 0;

  right: 0;

  background-color: #009FD5;

  overflow: hidden;

  width: 100%;

  height:0;

  transition: .8s ease;

  }
.container:hover .overlay {

  bottom: 0;

  height: 100%;

  opacity: 0.6;

  }
.text {

  white-space: nowrap; 

  color: white;

  font-size: 20px;

  position: absolute;

  overflow: hidden;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  -ms-transform: translate(-50%, -50%);

  }

  </style>

  </head>

  <body>
<h2>Slide in Overlay from the Top</h2>

  <p>Hover over the image to see the effect.</p>
<div class="container">

  <img src="https://www.agernic.com/uploads/nice-france.jpg" alt="Avatar" class="image">

  <div class="overlay">

  <div class="text">the great coast of France</div>

  </div>

  </div>

  

  </body>

Summary of description

<< Previous Page
HTML Button Style

Next Page >>
HTML Button Action

how to create image overlay hover effects, simple image hover effects with text - overlay fade, How to use hover in image in CSS?
Image Hover Overlay Fade - how to

Online Editor

ONLINE EDITOR

news templates

COLOR PICKER

news templates

This tool makes it easy to create, adjust, and experiment with custom colors for the web.

HTML Templates

Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.

CSS HTML Layout

Find here examples of creative and unique website layouts.

Free CSS HTML Menu

Find here examples of creative and unique website CSS HTML menu.