Omit a specific div element when applying a background overlay

Looking to create a block with an overlay hover effect - defaulting to a weak black background color and changing to no black background on hover. I want to include an icon and text in the center that remain unaffected by the hover state.

How can I prevent the icon and text from being affected by the hover effect?

I've experimented with various rules for both the overlay div and the icon div, but haven't had any success.

Is there a CSS rule that allows for some kind of exclusion?

I did manage to make it work by placing them outside the divs with the overlay background, but then the hover effect breaks when hovering over the icon and text.

You can view the code here.

<style>
.media-front-top-picture{
    background-image: url("");
    height:500px;
}
     .media-front-top-icon{
        content: url("");
        width: 130px;
        margin: auto;
        padding-top: 200px;
        opacity: 1;
     }
     .media-front-txt{
        font-size: 22px;
        letter-spacing: 8px;
        color: white;
        margin-top: 15px;
     }
.media-front-bottom-picture{
    background-image: url("");
    height:500px;
}
     .media-front-bottom-icon{
        content: url("");
        width:130px;
        margin: auto;
        padding-top: 200px;
     }

.media-picture-container {
    position: relative;
}
.media-picture-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    transition: .5s ease;
    background-color: rgba(0, 0, 0, 0.47);
}

.media-picture-overlay:hover {
  opacity: 0;
  cursor:pointer;
}
</style>





<div class="body-media">
<div class="media-picture-container">
    <div class="media-front-top-picture" style="border-bottom:4px solid white;">
    <div class="media-front-top-icon"></div>
    <div class="media-front-txt">VIDEOS</div>
    <div class="media-picture-overlay"></div>
</div>
</div>
<div class="media-picture-container">
     <div class="media-front-bottom-picture" style="border-bottom:4px solid white;">
     <div class="media-front-bottom-icon"></div>
     <div class="media-front-txt">PICTURES</div>
     <div class="media-picture-overlay"></div>
</div>
</div>
</div>
htmlcss

Answer №1

To ensure that your icons stand out, remember to assign a higher z-index than the overlay class. Also, don't forget to add position:relative to the icon classes so the z-index takes effect. It's worth noting that the example below only demonstrates this solution for one icon; you'll need to implement it elsewhere as well.

For illustration purposes:

.media-front-top-icon{
    content: url("example.com");
    width: 130px;
    margin: auto;
    padding-top: 200px;
    opacity: 1;
    z-index:10;
    position:relative;
 }

.media-picture-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    transition: .5s ease;
    background-color: rgba(0, 0, 0, 0.47);
    z-index:5;
}

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

Enable the automatic resizing of a div element

This div features inside: <div class="PF"> <img src="img" class="FollowerPic"> <span>Name</span> <div class="Text"></div> <div class="readURL"> ...

javascriptjqueryhtmlcss

Transitioning from vertical to horizontal orientations in flexbox design

I am looking to achieve the layout shown in this image using flexbox: The image illustrates both portrait and landscape orientations. The left side represents the portrait view while the right side displays the landscape view. My goal is to optimize my H ...

htmlcssflexbox

Center text vertically within a Bootstrap grid system

I've searched far and wide on Google, Stack Overflow, and other sources for solutions to vertically align text within my code, but I'm struggling to make it work. My code features a form where users can input a 'doom name' and the text ...

htmlcsstwitter-bootstrap

Having trouble selecting the first td within a tr using CSS3 selectors

I'm encountering an issue with selecting the first td in the tr of a dynamically generated table. I've attempted to do this using: .record_list tbody tr td:first-child { text-align: center; } However, the styles are not being applied as ex ...

htmlcss

Design a logo to serve as the main button on the navigation bar of the

I've been experimenting with adding a logo instead of the 'Home' text in my navigation bar, but I'm not sure where to implement it. Should I add it within #nav or separately? Also, I want the nav bar to stay fixed without overlapping on ...

javascriptjquerycsshtmltwitter-bootstrap

The <footer> element refuses to be placed at the bottom of the page

Struggling to keep my <footer> tag at the bottom of my page despite trying various techniques. Check out my website below to see the issue in action: ...

csshtml

Customize Pagination Style with Bootstrap Label Alignment

Seeking assistance with aligning a pagination element alongside other buttons and labels within the same row. I would like to have a label displaying current and total item counts right before the pagination elements, ensuring that everything is middle-ali ...

csstwitter-bootstrap-3

Decreasing the height of a div that wraps a slider

Currently, I am using a slider and would like to showcase its functionality. Here is the demo link: I have tried wrapping this slider in a div element, but it unexpectedly decreases the height to 125px from the original 100%. Here is the original code: ...

javascriptjqueryhtmlcssheight

Utilizing DOMStringMap data to populate CSS URLs

I am attempting to create a universal CSS modification for a webpage element that resembles: <button data-action="link" class="cardImageContainer coveredImage cardContent itemAction lazy lazy-image-fadein-fast" data-blurhash="lo ...

javascripthtmlcssdomjellyfin

Struggling to locate a straightforward sidebar solution without relying on Bootstrap. Finding an easy-to-use answer seems

I have a lightweight and easy-to-understand code for a website project with two panels. The first panel on the left is a large navigation (270px width, top to bottom, similar to a wiki) with approximately 30 unordered list items. Next to it is the second ...

javascripthtmljquerycsssidebar

Flashing white when transitioning background images

My website features a div with a blurred image that I want to gradually unblur upon hovering, using transition-property and transition-duration. I have two versions of the image prepared - one blurred and one unblurred. However, when viewing online (desp ...

htmlcss

Streamline Access to Zimbra Server Automatically

Currently, I am creating a webpage with a login feature at www.newpage.com. Here is the code snippet for reference: <form name="login"> Username<input type="text" name="userid"/> Password<input type="password" name="pswrd"/> <input ty ...

javascripthtmlauthenticationautomationzimbra

Injecting dynamic data into a function parameter with Angular 1 Interpolation

In my code, I have a feature that alters the text displayed on a button depending on certain conditions. $scope.text = 'Wait'; if(Number($scope.x) == Number($scope.y)) $scope.text = 'Go' else if(Number($scope.x) < Number($scope ...

javascripthtmlangularjs

Setting the value of an input box using jQuery

As someone who is new to jQuery, I am encountering an issue with setting a default value for an input text box. Despite trying both the val method and the .attr method, neither has seemed to work for me. Below you will find the input HTML along with the tw ...

jqueryhtmlformsbusiness-catalyst

Troubleshooting: jQuery's load() function behaving unexpectedly with textarea elements

Is there a way to retrieve user content from a PHP file using the load() function and display it in a textarea? I've noticed that this process works fine when the textarea is empty, but if the user types something in it beforehand, the content won&apo ...

javascriptphpjqueryhtmldom

How to dynamically insert an image using the `<img src=”?”>` tag in ASP.NET C#

In my book database, I store information about each book including the name of the picture file I want to display. For example, cprog.jpeg My challenge is that when I try to append the image filename to the src attribute to display the picture, it only di ...

asp.nethtmlc#-4.0

Is there a way to implement tab functionality in jQuery UI through an onclick event?

My goal is to enhance an existing jQuery UI Tab container by adding tab information and then updating the contents through re-initialization. To see a demonstration of what I am trying to achieve, take a look at this JSFiddle: http://jsfiddle.net/dmchale9 ...

javascriptjqueryhtmlcsstabs

Past methods: Obsolescence alert and caution

Trying to grasp the concepts of PHP & MYSQL, I have written this code which seems to be functioning properly. However, there are several "warnings" that I am unsure about. Nonetheless, PHP successfully connects to the database. Below are the relevant codes ...

phphtmlmysql

hiding the search box by clicking away from it

Can someone help me with modifying this search box design? @import url(http://weloveiconfonts.com/api/?family=entypo); /* entypo */ [class*="entypo-"]:before { font-family: 'entypo', sans-serif; color: #C0C0C0; } * { margin: 0px; pad ...

javascriptcss

What is the best way to dynamically include CSS in AngularJS?

Hello, I am currently attempting to add CSS dynamically but for some reason it is not working. Below you will find the code that I have been using: angular.module('myApp', [ 'myApp.controllers','myApp.services']). config([&ap ...

cssangularjs