Image Overlay on Hover: Elevate Your Website with Captivating Effects

Introduction

In this lab, we will learn how to create an image overlay effect on hover using CSS. This effect adds a stylish and professional touch to images, making them more engaging and interactive. By using pseudo-elements and transitions, we will create a smooth and visually appealing overlay that will enhance the user experience of any website.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("`CSS`")) -.-> css/BasicConceptsGroup(["`Basic Concepts`"]) css(("`CSS`")) -.-> css/BasicStylingGroup(["`Basic Styling`"]) css(("`CSS`")) -.-> css/CoreLayoutGroup(["`Core Layout`"]) css(("`CSS`")) -.-> css/AdvancedLayoutGroup(["`Advanced Layout`"]) css(("`CSS`")) -.-> css/IntermediateStylingGroup(["`Intermediate Styling`"]) css(("`CSS`")) -.-> css/ResponsiveandAdaptiveDesignGroup(["`Responsive and Adaptive Design`"]) css(("`CSS`")) -.-> css/DynamicStylingGroup(["`Dynamic Styling`"]) css/BasicConceptsGroup -.-> css/selectors("`Selectors`") css/BasicStylingGroup -.-> css/colors("`Colors`") css/BasicStylingGroup -.-> css/fonts("`Fonts`") css/BasicStylingGroup -.-> css/text_styling("`Text Styling`") css/CoreLayoutGroup -.-> css/box_model("`Box Model`") css/CoreLayoutGroup -.-> css/margin_and_padding("`Margin and Padding`") css/CoreLayoutGroup -.-> css/borders("`Borders`") css/CoreLayoutGroup -.-> css/width_and_height("`Width and Height`") css/CoreLayoutGroup -.-> css/display_property("`Display Property`") css/CoreLayoutGroup -.-> css/positioning("`Positioning`") css/AdvancedLayoutGroup -.-> css/flexbox("`Flexbox`") css/IntermediateStylingGroup -.-> css/backgrounds("`Backgrounds`") css/ResponsiveandAdaptiveDesignGroup -.-> css/mobile_first_design("`Mobile First Design`") css/DynamicStylingGroup -.-> css/transitions("`Transitions`") css/DynamicStylingGroup -.-> css/transformations("`Transformations`") css/IntermediateStylingGroup -.-> css/pseudo_classes("`Pseudo-classes`") css/IntermediateStylingGroup -.-> css/pseudo_elements("`Pseudo-elements`") subgraph Lab Skills css/selectors -.-> lab-35219{{"`Image Overlay on Hover`"}} css/colors -.-> lab-35219{{"`Image Overlay on Hover`"}} css/fonts -.-> lab-35219{{"`Image Overlay on Hover`"}} css/text_styling -.-> lab-35219{{"`Image Overlay on Hover`"}} css/box_model -.-> lab-35219{{"`Image Overlay on Hover`"}} css/margin_and_padding -.-> lab-35219{{"`Image Overlay on Hover`"}} css/borders -.-> lab-35219{{"`Image Overlay on Hover`"}} css/width_and_height -.-> lab-35219{{"`Image Overlay on Hover`"}} css/display_property -.-> lab-35219{{"`Image Overlay on Hover`"}} css/positioning -.-> lab-35219{{"`Image Overlay on Hover`"}} css/flexbox -.-> lab-35219{{"`Image Overlay on Hover`"}} css/backgrounds -.-> lab-35219{{"`Image Overlay on Hover`"}} css/mobile_first_design -.-> lab-35219{{"`Image Overlay on Hover`"}} css/transitions -.-> lab-35219{{"`Image Overlay on Hover`"}} css/transformations -.-> lab-35219{{"`Image Overlay on Hover`"}} css/pseudo_classes -.-> lab-35219{{"`Image Overlay on Hover`"}} css/pseudo_elements -.-> lab-35219{{"`Image Overlay on Hover`"}} end

Image Overlay on Hover

index.html and style.css have already been provided in the VM.

To display an image overlay effect on hover, follow these steps:

Use the ::before and ::after pseudo-elements for the top and bottom bars of the overlay respectively. Set their opacity, transform and transition to produce the desired effect.
Use the <figcaption> for the text of the overlay. Set display: flex, flex-direction: column and justify-content: center to center the text into the image.
Use the :hover pseudo-selector to update the opacity and transform of all the elements and display the overlay.

Here's the HTML code to use:

<figure class="hover-img">
  <img src="https://picsum.photos/id/200/440/320.jpg" />
  <figcaption>
    <h3>Lorem <br />Ipsum</h3>
  </figcaption>
</figure>

And here's the CSS code to use:

.hover-img {
  display: inline-block;
  margin: 8px;
  width: 100%;
  max-width: 320px;
  min-width: 240px;
  overflow: hidden;
  position: relative;
  text-align: center;
  background-color: #000;
  color: #fff;
}

.hover-img * {
  box-sizing: border-box;
  transition: all 0.45s ease;
}

.hover-img::before,
.hover-img::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  border-top: 32px solid rgba(0, 0, 0, 0.5);
  border-bottom: 32px solid rgba(0, 0, 0, 0.5);
  z-index: 1;
  opacity: 0;
  transform: scaleY(2);
  transition: all 0.3s ease;
}

.hover-img::before {
  content: "";
  top: 0;
  bottom: auto;
}

.hover-img img {
  vertical-align: top;
  max-width: 100%;
  backface-visibility: hidden;
}

.hover-img figcaption {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.1em;
  opacity: 0;
  z-index: 2;
  transition-delay: 0.1s;
  font-size: 24px;
  font-family: sans-serif;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.hover-img:hover::before,
.hover-img:hover::after {
  transform: scale(1);
  opacity: 1;
}

.hover-img:hover img {
  opacity: 0.7;
}

.hover-img:hover figcaption {
  opacity: 1;
}

Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Summary

Congratulations! You have completed the Image Overlay on Hover lab. You can practice more labs in LabEx to improve your skills.

Image Overlay on Hover

Introduction

Skills Graph

Image Overlay on Hover

Summary

Other CSS Tutorials you may like