Adding an overlay on hover to a flex item within a flex container

I've been working on this code and I'm trying to add a gray color overlay over the content of each flexItem, including the image. I've tried using relative position on flexCont and absolute position on flexItem overlay but it's not working. Does anyone have any ideas?

I have a JavaScript function that applies an overlay class on hover, and removes it when you stop hovering.

$('.flexItem').hover(
        function() {
            $(this).addClass( 'overlay' );
            console.log('hover')
          }, function() {
          $(this).removeClass( 'overlay' ); 
            console.log('no hover')
          }
    );
.flexCont{
    display: flex;
    display: -ms-flex;
display: -webkit-flex;
    flex-direction: row;
}

.flexContO{
    display: flex;
    display: -ms-flex;
display: -webkit-flex;
    flex-direction: row;
}

.flexContO>div{
    width:50%;
}

.flexCont .flexItem{
    flex: 1 1 25%;
}

.flexItem{
    display: flex;
    flex-direction: column;
}
.overlay{
    background-color: rgba(0,0,0,0.5); /*dim the background*/
    position: relative;
z-index:999!important;
  }

.flexItemV{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.flexItemO{
    display: flex;
    flex-direction: row;  
}
.flexItemO>div{
    width:50%;
}

.flexItem1{
   height:375px;
   justify-content: center;
   align-items: center;
   display: flex;
   flex-direction: column;
   text-align:center;
   padding:20px;
}

.flexItem2>img{
    width: 100%;z-index:99!important;
}

.flexItemV1{

}
.flexItemV2{
    
}

.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flexCont">
    <div class="flexItem">
       <div class="flexItem1">
          <p>Place</p>
          <h3>u &amp; d 4</h3>
          <a href="http//link/u-d/">sometext bla bla </a><br><a href="http//link/u-d/"><i class="x-icon x-icon-arrow-right" data-x-icon="" aria-hidden="true"></i></a>
       </div>
       <div class="flexItem2"><img src="https://meme.xyz/uploads/posts/t/l-1229-the-two-states-of-every-programmer.jpg"></div>
    </div>
    <div class="flexItem">
       <div class="flexItem2"><img src="https://meme.xyz/uploads/posts/t/l-1229-the-two-states-of-every-programmer.jpg"></div>
       <div class="flexItem1">
          <p>Place</p>
          <h3>d &amp; u 3</h3>
          <a href="http//link/d-u/">sometext bla bla </a><br><a href="http//link/d-u/"><i class="x-icon x-icon-arrow-right" data-x-icon="" aria-hidden="true"></i></a>
       </div>
    </div>
    <div class="flexItem">
       <div class="flexItem1">
          <p>Place</p>
          <h3>d &amp; u 2</h3>
          <a href="http//link/matrimonio-test2/">sometext bla bla </a><br><a href="http//link/matrimonio-test2/"><i class="x-icon x-icon-arrow-right" data-x-icon="" aria-hidden="true"></i></a>
       </div>
       <div class="flexItem2"><img src="https://meme.xyz/uploads/posts/t/l-1229-the-two-states-of-every-programmer.jpg"></div>
    </div>
    <div class="flexItem">
       <div class="flexItem2"><img src="https://meme.xyz/uploads/posts/t/l-1229-the-two-states-of-every-programmer.jpg"></div>
       <div class="flexItem1">
          <p>Place</p>
          <h3>u &amp; d 1</h3>
          <a href="http//link/matrimonio-test/">sometext bla bla </a><br><a href="http//link/matrimonio-test/"><i class="x-icon x-icon-arrow-right" data-x-icon="" aria-hidden="true"></i></a>
       </div>
    </div>
 </div>

javascriptjqueryhtmlcssflexbox

Answer №1

Here is the updated code snippet for hover effect:

$('.flexItem').hover(
  function() {
    $(this).addClass( 'overlay' );
    $(this).find('img').css('opacity', '0.6');
    //console.log('hover')
  }, function() {
    $(this).removeClass( 'overlay' ); 
    $(this).find('img').css('opacity', '1');
    //console.log('no hover')
  }
);
.flexCont{
    display: flex;
    display: -ms-flex;
    display: -webkit-flex;
    flex-direction: row;
}

.flexContO{
    display: flex;
    display: -ms-flex;
    display: -webkit-flex;
    flex-direction: row;
}

.flexContO>div{
    width:50%;
}

.flexCont .flexItem{
    flex: 1 1 25%;
}

.flexItem{
    display: flex;
    flex-direction: column;
}
.overlay{
    background-color: rgba(0,0,0,0.5); /*dim the background*/
    position: relative;
    z-index:999!important;
}

.flexItemV{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.flexItemO{
    display: flex;
    flex-direction: row;  
}
.flexItemO>div{
    width:50%;
}

.flexItem1{
   height:375px;
   justify-content: center;
   align-items: center;
   display: flex;
   flex-direction: column;
   text-align:center;
   padding:20px;
}

.flexItem2>img{
    width: 100%;
    z-index:99!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flexCont">
    <div class="flexItem">
       <div class="flexItem1">
          <p>Place</p>
          <h3>u &amp; d 4</h3>
          <a href="http//link/u-d/">sometext bla bla </a><br><a href="http//link/u-d/"><i class="x-icon x-icon-arrow-right" data-x-icon="" aria-hidden="true"></i></a>
       </div>
       <div class="flexItem2"><img src="https://meme.xyz/uploads/posts/t/l-1229-the-two-states-of-every-programmer.jpg"></div>
    </div>
    <div class="flexItem">
       <div class="flexItem2"><img src="https://meme.xyz/uploads/posts/t/l-1229-the-two-states-of-every-programmer.jpg"></div>
       <div class="flexItem1">
          <p>Place</p>
          <h3>d &amp; u 3</h3>
          <a href="http//link/d-u/">sometext bla bla </a><br><a href="http//link/d-u/"><i class="x-icon x-icon-arrow-right" data-x-icon="" aria-hidden="true"></i></a>
       </div>
    </div>
    <div class="flexItem">
       <div class="flexItem1">
          <p>Place</p>
          <h3>d &amp; u 2</h3>
          <a href="http//link/matrimonio-test2/">sometext bla bla </a><br><a href="http//link/matrimonio-test2/"><i class="x-icon x-icon-arrow-right" data-x-icon="" aria-hidden="true"></i></a>
       </div>
       <div class="flexItem2"><img src="https://meme.xyz/uploads/posts/t/l-1229-the-two-states-of-every-programmer.jpg"></div>
    </div>
    <div class="flexItem">
       <div class="flexItem2"><img src="https://meme.xyz/uploads/posts/t/l-1229-the-two-states-of-every-programmer.jpg"></div>
       <div class="flexItem1">
          <p>Place</p>
          <h3>u &amp; d 1</h3>
          <a href="http//link/matrimonio-test/">sometext bla bla </a><br><a href="http//link/matrimonio-test/"><i class="x-icon x-icon-arrow-right" data-x-icon="" aria-hidden="true"></i></a>
       </div>
    </div>
 </div>

Answer №2

This code snippet demonstrates how to create an overlay effect using CSS pseudo elements rather than setting the background directly on the element. By adding a pseudo element with absolute positioning and a translucent background color, you can achieve the desired overlay effect without interfering with the content of the element.

Additionally, the jQuery script provided allows for triggering the overlay effect on hover, enhancing the interactive nature of the design.

$('.flexItem').hover(
        function() {
            $(this).addClass( 'overlay' );
            console.log('hover')
          }, function() {
          $(this).removeClass( 'overlay' ); 
            console.log('no hover')
          }
    );
... (remaining code omitted for brevity)

Answer №3

You should separate the overlay as its own element within the .flexItem container

$('.flexItem').hover(
  function() {
    $(this).find('.overlay').show();
  },
  function() {
    $(this).find('.overlay').hide();
  }
);
.flexCont {
  display: flex;
  display: -ms-flex;
  display: -webkit-flex;
  flex-direction: row;
}

.flexContO {
  display: flex;
  display: -ms-flex;
  display: -webkit-flex;
  flex-direction: row;
}

.flexContO>div {
  width: 50%;
}

.flexCont .flexItem {
  flex: 1 1 25%;
}

.flexItem {
  display: flex;
  flex-direction: column;
  position: relative; /* Added */
}

.overlay {
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute; /* Changed from relative */
  top: 0; /* Added */
  left: 0; /* Added */
  width: 100%; /* Added */
  height: 100%; /* Added */
  display: none; /* Added */
}

.flexItemV {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.flexItemO {
  display: flex;
  flex-direction: row;
}

.flexItemO>div {
  width: 50%;
}

.flexItem1 {
  height: 375px;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 20px;
}

.flexItem2>img {
  width: 100%;
}

.flexItemV1 {}

.flexItemV2 {}

.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flexCont">
  <div class="flexItem">
    <div class="flexItem1">
      <p>Place</p>
      <h3>u &amp; d 4</h3>
      <a href="http//link/u-d/">sometext bla bla </a><br><a href="http//link/u-d/"><i class="x-icon x-icon-arrow-right" data-x-icon="" aria-hidden="true"></i></a>
    </div>
    <div class="flexItem2"><img src="https://meme.xyz/uploads/posts/t/l-1229-the-two-states-of-every-programmer.jpg"></div>
    <div class="overlay"></div>
  </div>
  <div class="flexItem">
    <div class="flexItem2"><img src="https://meme.xyz/uploads/posts/t/l-1229-the-two-states-of-every-programmer.jpg"></div>
    <div class="flexItem1">
      <p>Place</p>
      <h3>d &amp; u 3</h3>
      <a href="http//link/d-u/">sometext bla bla </a><br><a href="http//link/d-u/"><i class="x-icon x-icon-arrow-right" data-x-icon="" aria-hidden="true"></i></a>
    </div>
    <div class="overlay"></div>
  </div>
  <div class="flexItem">
    <div class="flexItem1">
      <p>Place</p>
      <h3>d &amp; u 2</h3>
      <a href="http//link/matrimonio-test2/">sometext bla bla </a><br><a href="http//link/matrimonio-test2/"><i class="x-icon x-icon-arrow-right" data-x-icon="" aria-hidden="true"></i></a>
    </div>
    <div class="flexItem2"><img src="https://meme.xyz/uploads/posts/t/l-1229-the-two-states-of-every-programmer.jpg"></div>
    <div class="overlay"></div>
  </div>
  <div class="flexItem">
    <div class="flexItem2"><img src="https://meme.xyz/uploads/posts/t/l-1229-the-two-states-of-every-programmer.jpg"></div>
    <div class="flexItem1">
      <p>Place</p>
      <h3>u &amp; d 1</h3>
      <a href="http//link/matrimonio-test/">sometext bla bla </a><br><a href="http//link/matrimonio-test/"><i class="x-icon x-icon-arrow-right" data-x-icon="" aria-hidden="true"></i></a>
    </div>
    <div class="overlay"></div>
  </div>
</div>

Answer №4

Your link is not clickable in all other solutions, but here is a complete solution where a grey dimmer comes over the image and gives the exact effect you are looking for.

$(".flexItem").mouseover(function(){
    $(".overlay-items").css("height", $(".flexItem").outerHeight());
  });
.flexCont{
    display: flex;
    display: -ms-flex;
  display: -webkit-flex;
    flex-direction: row;
}

.flexContO{
    display: flex;
    display: -ms-flex;
  display: -webkit-flex;
    flex-direction: row;
}

.flexContO>div{
    width:50%;
}

.flexCont .flexItem{
    flex: 1 1 25%;
}

.flexItem{
    display: flex;
    flex-direction: column;
    position: relative;
}
.overlay-items{
    background-color: rgba(0,0,0,0.5); /*dim the background*/
    position: relative;
    z-index:999!important;
    display: none;
    width: 100%;
    position: absolute;
  }

.flexItemV{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.flexItemO{
    display: flex;
    flex-direction: row;  
}
.flexItemO>div{
    width:50%;
}

.flexItem1{
   height:375px;
   justify-content: center;
   align-items: center;
   display: flex;
   flex-direction: column;
   text-align:center;
   padding:20px;
   z-index: 9999999;
}

.flexItem2>img{
    width: 100%;z-index:99!important;
}
.flexItem:hover > .overlay-items {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flexCont">
    <div class="flexItem">
    <div class="overlay-items"></div>
       <div class="flexItem1">
          <p>Place</p>
          <h3>u &amp; d 4</h3>
          <a href="http//link/u-d/">sometext bla bla </a><br><a href="http//link/u-d/"><i class="x-icon x-icon-arrow-right" data-x-icon="" aria-hidden="true"></i></a>
       </div>
       <div class="flexItem2"><img src="https://meme.xyz/uploads/posts/t/l-1229-the-two-states-of-every-programmer.jpg"></div>
    </div>
    <div class="flexItem">
    <div class="overlay-items"></div>
       <div class="flexItem2"><img src="https://meme.xyz/uploads/posts/t/l-1229-the-two-states-of-every-programmer.jpg"></div>
       <div class="flexItem1">
          <p>Place</p>
          <h3>d &amp; u 3</h3>
          <a href="http//link/d-u/">sometext bla bla </a><br><a href="http//link/d-u/"><i class="x-icon x-icon-arrow-right" data-x-icon="" aria-hidden="true"></i></a>
       </div>
    </div>
    <div class="flexItem">
    <div class="overlay-items"></div>
       <div class="flexItem1">
          <p>Place</p>
          <h3>d &amp; u 2</h3>
          <a href="http//link/matrimonio-test2/">sometext bla bla </a><br><a href="http//link/matrimonio-test2/"><i class="x-icon x-icon-arrow-right" data-x-icon="" aria-hidden="true"></i></a>
       </div>
       <div class="flexItem2"><img src="https://meme.xyz/uploads/posts/t/l-1229-the-two-states-of-every-programmer.jpg"></div>
    </div>
    <div class="flexItem">
    <div class="overlay-items"></div>
       <div class="flexItem2"><img src="https://meme.xyz/uploads/posts/t/l-1229-the-two-states-of-every-programmer.jpg"></div>
       <div class="flexItem1">
          <p>Place</p>
          <h3>u &amp; d 1</h3>
          <a href="http//link/matrimonio-test/">sometext bla bla </a><br><a href="http//link/matrimonio-test/"><i class="x-icon x-icon-arrow-right" data-x-icon="" aria-hidden="true"></i></a>
       </div>
    </div>
 </div>

Answer №5

Alright, let's explore how the after pseudo element can be utilized for styling. Take a look at this code snippet:

$('.flexItem').hover(
  function() {
    $(this).addClass( 'overlay' );
  }, function() {
    $(this).removeClass( 'overlay' ); 
  }
);
.flexCont {
    display: flex;
    display: -ms-flex;
    display: -webkit-flex;
    flex-direction: row;
}

.flexContO {
    display: flex;
    display: -ms-flex;
    display: -webkit-flex;
    flex-direction: row;
}

.flexContO>div {
    width: 50%;
}

.flexCont .flexItem {
    flex: 1 1 25%;
}

.flexItem {
    display: flex;
    flex-direction: column;
}

.overlay {
    /*dim the background*/
    position: relative;
}

.overlay:after {
    content: "";
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.flexItemV {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.flexItemO {
    display: flex;
    flex-direction: row;
}

.flexItemO>div {
    width: 50%;
}

.flexItem1 {
    height: 375px;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 20px;
}

.flexItem2>img {
    width: 100%;
    z-index: 99 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flexCont">
    <div class="flexItem">
       <div class="flexItem1">
          <p>Place</p>
          <h3>u &amp; d 4</h3>
          <a href="http//link/u-d/">sometext bla bla </a><br><a href="http//link/u-d/"><i class="x-icon x-icon-arrow-right" data-x-icon="" aria-hidden="true"></i></a>
       </div>
       <div class="flexItem2"><img src="https://meme.xyz/uploads/posts/t/l-1229-the-two-states-of-every-programmer.jpg"></div>
    </div>
    <div class="flexItem">
       <div class="flexItem2"><img src="https://meme.xyz/uploads/posts/t/l-1229-the-two-states-of-every-programmer.jpg"></div>
       <div class="flexItem1">
          <p>Place</p>
          <h3>d &amp; u 3</h3>
          <a href="http//link/d-u/">sometext bla bla </a><br><a href="http//link/d-u/"><i class="x-icon x-icon-arrow-right" data-x-icon="" aria-hidden="true"></i></a>
       </div>
    </div>
    <div class="flexItem">
       <div class="flexItem1">
          <p>Place</p>
          <h3>d &amp; u 2</h3>
          <a href="http//link/matrimonio-test2/">sometext bla bla </a><br><a href="http//link/matrimonio-test2/"><i class="x-icon x-icon-arrow-right" data-x-icon="" aria-hidden="true"></i></a>
       </div>
       <div class="flexItem2"><img src="https://meme.xyz/uploads/posts/t/l-1229-the-two-states-of-every-programmer.jpg"></div>
    </div>
    <div class="flexItem">
       <div class="flexItem2"><img src="https://meme.xyz/uploads/posts/t/l-1229-the-two-states-of-every-programmer.jpg"></div>
       <div class="flexItem1">
          <p>Place</p>
          <h3>u &amp; d 1</h3>
          <a href="http//link/matrimonio-test/">sometext bla bla </a><br><a href="http//link/matrimonio-test/"><i class="x-icon x-icon-arrow-right" data-x-icon="" aria-hidden="true"></i></a>
       </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

Images fail to appear on Github pages

Check out my GitHub page at You can also view the repository here: https://github.com/chryspenalber/hercules I'm encountering an issue where the images inserted through CSS are not showing up on the GitHub page, although they display fine on localho ...

htmlcssgithub-pages

Efficiently Incorporating JavaScript Variables into DataTable's aoData

I am facing an issue with a variable named search_gen, which is generated through an ajax request (shown below). var search_gen; $.ajax({ type: "POST", url: link+module_name+'search_generator/'+module_active, dataType: "text", as ...

javascriptjsonajaxdatatable

Error: A property called 'node' is undefined and cannot be read

Currently attempting to complete the NPM installation process. I initiated with the following command: brew install node followed by curl -O https://www.npmjs.org/install.sh and then ~ % sh install.sh The resultant output is as follows: tar=/usr/bi ...

javascriptnode.jsinstallationnpmhomebrew

Why is the parent element not receiving the event in Vue.JS? Is it necessary for the parent to be a custom component in order to receive the

I'm new to Vue.js. I used to think that Events worked by bubbling up through the DOM tree until caught by a parent element. However, something seems to be off. The code below isn't functioning as expected - there are no errors or warnings, and in ...

javascriptvue.jsevents

Discover the steps to have anchor tag links open in an external browser instead of loading within the same webview in Xamarin.Forms

Within my webview, I am displaying HTML content that includes javascript, jquery, and CSS. Within this content, there are anchor tags with the attribute target="_blank". When these links are clicked, they currently open in the same webview page. However, ...

javascriptc#xamarinxamarin.androidxamarin.forms

Alter the typography of the text that has been enhanced by Google

I am attempting to modify the default font of certain text that is processed through google-code-prettify within an angular directive. The structure of the template served by my directive appears as follows: <pre class= "prettyprint" style= "border:1p ...

cssangularjstemplatesfontssyntax-highlighting

Jquery $varName compared to $(varName)

const myElem = document.querySelector("div#myDiv"); console.log(myElem.id); let myVar = $("div#myDiv"); myVar.val(); Do you notice any distinction between the two examples provided? Are they equal in terms of efficiency? Your insights are greatly apprec ...

jquery

Reset vue input fields after triggering event

I'm facing an issue with my Vue component that has an input and a button. I want the button to send the input data elsewhere and then clear the input field, but it's not working as expected. Below is a basic runnable version of what I currently ...

javascriptvue.js

What steps should I take to fix the error "Unused left side of comma operator with no side effects.ts(2695)" in my React project?

import React from "react"; import { useRecoilState } from "recoil"; import { Industry, industryState } from "../atoms/industriesAtoms"; const manageIndustryData = () => { const [industryStateValue, setIndustryStateValue] ...

javascriptreactjstypescript

Discovering HTML tags on a mobile browser with switmailor

We have created a form and are using the Swiftmailer library to send its data via email. If a user fills out the form from a desktop browser, the data appears correctly without any HTML tags. However, if the user fills out the form from a mobile browser, ...

phphtmlswiftmailer

How can I modify the display value in a series using Highcharts?

Hey there, I'm relatively new to stackoverflow, django, and highcharts so please bear with me if I make any mistakes. Currently, I'm working on displaying time and dates in highcharts and came across a small issue. Everything looks fine on the c ...

javascriptdjangohighcharts

Sequelize query for filtering on a many-to-many relationship

Seeking assistance with Sequelize ORM in express.js, I have successfully implemented a many-to-many relationship between two tables. To simplify my query, imagine the tables as Users, Books, and UserBooks where UserBooks contains UserId, BookId, and an ex ...

javascriptpostgresqlexpressormsequelize.js

"Troubleshooting the issue of addEventListener failing to work in conjunction

window.addEventListener("onbeforeunload",function() {return "are you sure?"}); Unfortunately, the above code doesn't seem to be functioning as intended. The confirmation box is not being displayed and the page closes without any prompts. While I am ...

javascripteventsgoogle-chromeaddeventlisteneronbeforeunload

Using CSS to design star ratings (with each radio button and label contained within a div)

Looking to create a custom star rating system using CSS. I found inspiration from this link: https://codepen.io/andreacrawford/pen/NvqJXW However, my DOM structure is different. input { display: none; } .radio-div label { visibility: hidden; } .w ...

htmlcss

How can we create a reusable dropdown list that appears when clicking on different elements?

Imagine having different sections of a webpage that, when clicked, reveal a dropdown list right below the selected link. I've noticed some websites accomplish this by actually having just one dropdown list defined in the DOM, which then appears below ...

javascriptjquery

What is the best way to style an icon in CSS?

I am facing an issue with the following code snippet: <span class="stars">★★☆☆☆ </span> My objective is to style the empty stars differently, but I am unsure how to specifically target them. The following CSS rule does not produc ...

javascriptjquerycsswordpressicons

Why is the Axios instance/function not being passed the argument?

I am currently working on refactoring a next.js App that has a functioning axios call. However, I have encountered an issue with my new function not receiving arguments. The problem consists of two main components: my next.js page and an external custom m ...

javascriptaxiosnext.js

Puzzling blank area found beneath the form component

There seems to be some extra space at the bottom of a form when it's placed inside a div. How can we remove that unwanted space? In examples from stack overflow, the extra space is not visible in the code snippets provided. However, it appears elsewh ...

htmlcssformsspacing

Having trouble retrieving coordinates from the ajax request and passing them to the Google Maps script

In my places.php file, I am retrieving coordinates from the database and confirming their accuracy through echoing. The connection to the database is established without any issues. A self-executing function has been created in order to continuously update ...

javascriptphpjqueryajaxgoogle-maps

I seem to be having some issues with the functionality of .not() and it's

I am working on creating a menu that remains open for a set amount of time and then fades out if neither the parent nor the menu is hovered over. The goal is to have all other menus close when hovering over a new parent in the menu, but the current code k ...

jqueryhtml