Display an image overlay upon hovering over a div

I've developed an add-on for Elementor that includes a card with the following HTML markup:

        <div class="card">
            <div class="header">
                <img src="img.jpg">
            </div>
            <div class="content">
                <p>some content</p>
            </div>
        </div>

To display an overlay on the image when hovered, I used Elementor's overlay background type control with the selector {{wrapper .header img:hover:before}}. Now, I want the image overlay to also appear when the div with the class "card" is hovered over, using CSS.

htmlcsselementor

Answer №1

Follow these steps to achieve the desired effect:

Create an image overlay when hovering over a div tag

.container {
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
}

.container:hover .overlay {
  opacity: 1;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}
<h2>Fade in Overlay</h2>
<p>Hover over the image to see the effect.</p>

<div class="container">
  <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">Hello World</div>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I'm having trouble getting the HTML checkbox symbol to show up correctly. My goal is to create all the elements using the DOM

I am currently building all of my elements manually through the DOM tree, and I am attempting to insert a checkbox symbol in this manner: //Add date var tdDate = document.createElement("td"); tdDate.textContent = ("" + workoutList[idx].date); ...

javascripthtmldom

When a Vue.js datepicker is set as required, it can be submitted even if

When using the vuejs-datepicker, setting the html required attribute on input fields may not work as expected. This can lead to the form being submitted without an input value. <form> <datepicker placeholder="Select Date" required></datep ...

javascripthtmlvue.jsvuejs2vuejs-datepicker

Steps for inserting an image:

Looking for help adding a static header image to a simple HTML page that contains two div tags: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1 /DTD/xhtml1-strict.dtd"> <html> <head> ...

jqueryhtml

Concealing Bootstrap 3 elements on a split-screen layout

I encountered a peculiar issue with Bootstrap 3. When I resize my browser width to half the screen, there is a slight 1px threshold where both "hidden-xs" and "hidden-sm" elements become visible simultaneously. Is there a way to fix this so that only one o ...

csstwitter-bootstraptwitter-bootstrap-3

Discover the simple steps to integrate a timezone dropdown feature into your WordPress website using the Contact Form 7 plugin

I am designing a website and I need to implement a query form with a customizable time zone selection. Are there any specific steps to add a time zone drop-down menu using Contact Form 7? Here is the desired result I'm aiming for: Your assistance wil ...

htmlwordpressdrop-down-menuwordpress-themingcontact-form-7

The correct way to modify the VB property name for display in Razor

My property goes by the name "UglyPropertyName" but in my view I wish to change its Display Name to "New Role" using @Html.DisplayNameFor(Function(model) model.UglyPropertyName) In C#, you can update the display name of a property by adding [Display(Nam ...

htmlvb.netrazor

Switching the checkbox value upon clicking a div element

One challenge I am facing is with a checkbox that saves its value and title in the local storage when clicked. This checkbox is located within a div, and I want the checkbox value to change whenever any part of the div is clicked. Despite my efforts, I hav ...

javascripthtmlcssangularjscordova

Position the scroll down arrow at the center bottom of a full-screen div using WPBakery Visual Composer

I have a series of full-screen sections in Visual Composer and I am trying to add an arrow at the bottom of each one to indicate to users that they should scroll for more content. However, my attempts with absolute positioning on the divs containing the ic ...

csswordpressvisual-composerwpbakery

What is the best way to add a character within a YouTube JSON link?

Fetching json data from a link, the youtube format in the link is http:\/\/www.youtube.com\/watch?v=UVKsd8z6scw. However, I need to add the letter "v" in between this link to display it in an iframe. So, the modified link should appear as ht ...

javascriptjqueryjsonhtml

Disable Button's Shadow when it is in an active state (clicked)

Check out the DEMO to see the button animation CSS in action. The CSS code for the button animations is as follows: .btnliner { /* CSS properties */ } /* More CSS properties */ .btnliner:hover { /* Hover effects */ } Here is the corresponding J ...

javascriptjqueryhtmlcss

How can I use CSS to transform a "+" symbol to an "x"?

When I created an accordion using HTML, JS, and CSS, I encountered a problem. The "+" sign in the accordion does not rotate correctly as it should. Instead of rotating from the middle of the "+" sign, it rotates from the top. This is my HTML code: <di ...

jqueryhtmlcss

Develop a personalized mapping API with a unique image integration for website navigation

Currently, I am in the process of developing a website for my university that will allow users to easily locate all available free food options on campus. My goal is to create a platform where food providers can register their events, have them saved in a ...

phpjavascripthtml

HTML - Centered layout with a constant header and footer

Imagine a layout where there is always a header at the top, a footer at the bottom, and the space between them should be filled by the content 100% (image 2). Additionally, everything in the header, content, and footer should be horizontally centered, usin ...

htmlcsswrapper

Align bootstrap button to the center on xs screens

I've spent countless hours on this issue - I just can't seem to get the button centered properly in xs mode. It keeps aligning itself based on the left side, no matter what I try. I've searched through Bootstrap but couldn't find a clea ...

htmlcsstwitter-bootstrap

Positioning Anchors in HTML Tables within the Viewport: A Comprehensive Guide

I am utilizing anchor elements within an HTML table and aiming to incorporate some spacing at the top of the viewport. I have discovered that by placing the anchor inside a dummy DIV element within the TD, I can achieve this. However, my goal is also to hi ...

csshtml-tablepositionanchorpadding

What makes CSS Overflow: hidden toggle from working initially to suddenly not working?

There seems to be an issue with the code below - it works fine initially, but as soon as I tweak the height values for .Image, it stops functioning as expected. The test image starts overflowing instead of staying hidden, and no matter how many times I a ...

htmlcss

Automatically transfer images to a designated folder using PHP

I am just starting out in web development. I have a vision of creating a webpage with a photo gallery. Below is the initial code snippet: <body> <div class="container"> <header class="clearfix"> </header> ...

phphtml

When using JQuery's :first selector, it actually chooses the second element instead of the first

I'm facing an issue with a JQuery script that makes an AJAX request to the following URL https://djjohal.video/video/671/index.html#gsc.tab=0, which holds information about a video song. My goal is to extract and retrieve all the details from the HTM ...

javascriptjqueryhtmlajaxselector

Is it possible to automatically select a file and upload it to a specific server? If so, how can this

Hey there! I'm looking for a code snippet that allows me to automatically select a file and upload it to a specific link. Any ideas on how to accomplish this task? Here is the HTML code: <html> <head><title>Uploading</title>& ...

phphtmlforms

If the value of the first input is zero, display "PAID" as the value of the second input. If the value of the first input is not zero, display "NOT PAID" as the value of the second input

When the value of the first input in HTML is 0, then display "PAID" as the value of the second input. If the value of the first input is not 0, then show "NOT PAID" as the value of the second input. <label>Balance Amount</label> / ...

htmljquery