Hovering over a white background will darken the CSS styling

A stunning image on a dark background

Displayed on Hover (right)

An elegant picture with a white background

Activated on hover (incorrectly)

I would like it to have a darkened effect on the white background as well.

CSS Styling

.photo
  background: no-repeat center center;
  background-size: cover;
  border-radius: 5px;
  width: 100%;
  height: 310px; 
  position: relative;
  box-shadow: 0 0 5px 0px rgba(0, 0, 0, 0.65);
  &:hover {
    background-color: #000;
    opacity: 0.5;
  }

HTML Markup

<%=link_to p do %>
    <div class="photo smalled" style="background-image: url(<%=backdrop(p, 'w300')%>)">

        <div class="rating text-right">
            <%=starsrating p.rating%>
        </div>
        <div class="overlay">
            <div class="text-left">
                <h6><%=p.title%></h6>
                <h4>
                    <small>
                        <strong><%=p.nextSchedule.channel.name%></strong>
                         <%=l p.nextSchedule.start, :format => :short%>
                    </small>
                </h4>
            </div>
        </div>
    </div>
<% end %>

Answer №1

To achieve this effect, you can create a pseudo-element that overlays the .photo <div>. Initially transparent, it can change to a translucent black background when hovering over the .photo <div>, achieved through rgba or setting opacity.

.photo {
  background: no-repeat center center;
  background-size: cover;
  border-radius: 5px;
  width: 100%;
  height: 310px;
  position: relative;
  box-shadow: 0 0 5px 0px rgba(0, 0, 0, 0.65);
  &:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: block;
    border-radius: 5px;
  }
  &:hover {
    &:after {
      background: rgba(0,0,0,0.3); 
    }
  }
}

http://jsbin.com/ePiGuha/2/edit

Keep in mind that this element will cover elements within the div, so adjust their positioning to relative and manage z-index accordingly.

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

Tips for creating a responsive H1 tag within the Avada WordPress theme by implementing CSS

One of my acquaintances recently upgraded his Avada WordPress theme to the latest version of WordPress without physically uploading any files. However, after this upgrade, he noticed that the page titles (H1) no longer appear responsive as they did before. ...

React Semantic UI Grid and Div components can be toggled by using a button to decrease

My goal is to create a menu that initially displays with a certain width, but when a button is clicked, it will decrease the width to 50px and only show the icon. I'm struggling to figure out how to adjust the width of my div and integrate this funct ...

From Table to DIV: A Simple Conversion

I have encountered a major issue that has stumped me so far. Perhaps you can assist me. I am dealing with a table that appears as follows: __________________________________ | | time1 | time2 | time3 | +--------+-------+-------+-------+ | John | ...

Steps for setting a background image behind radio buttons

I am currently facing a challenge in adding a background image to a div that contains some radio buttons and updating it dynamically with Angular based on the current page. app.controller('thingCtrl', function ($scope, $rootScope, $routeParams ...

The current code lacks any form of line breaks

While attempting to edit a CSS file in Sublime Text 2, I noticed that all the code is displayed without any line breaks. This makes it difficult to read and work with. Is there a way to fix this issue and format the code into readable sections? ...

The issue with clip-path not functioning correctly in Safari persists

My list of clipped elements is causing an issue when using the CSS3 clip-path method to clip an image into an SVG path. The clipping works perfectly, but in Safari (V 12.1.4), the position of the clipped element changes with each box. The element ...

Customizing padding and margin in material-UI styles

Having issues with excessive padding and margin inside my tab component, even after trying to override it. I've followed some suggestions on StackOverflow but none seem to work. Here's how it looks: https://i.stack.imgur.com/Bgi3u.png Here is th ...

Guide on eliminating flex in CSS

Having an issue with aligning two grids created in HTML using Bootstrap. Below is the code: <!DOCTYPE html> <html lang="en"> <head> <title>IRIS Flower Classification</title> <link rel="stylesheet" href="{{ url_for( ...

The use of .hidden in Tailwind-CSS does not result in the application of flex or block styles to the element

My intention is to hide the div on small screens and display it on larger screens starting from md: However, it seems like the .hidden class has a higher priority or may be interfering with some of my dependencies. <div className="hidden md:flex&qu ...

Discover the magic of Bootstrap 3.0 Popovers and Tooltips

I'm struggling with implementing the popover and tooltip features in Bootstrap. While I have successfully implemented drop downs and modals, the tooltips are not styled or positioned correctly as shown in the Bootstrap examples, and the popover featur ...

Ensuring a button (class) is in active hover mode when the document loads

My website features 4 clickable service buttons on the homepage, each with a unique hover effect (background-color change) when users interact with them. While this setup works well overall, I am looking to highlight the FIRST button as the most important ...

Create a bookmark system on an HTML page by utilizing the existing heading tags and implementing Javascript

Looking to implement a bookmark system using the headings within my HTML document, based on heading hierarchy. Unfortunately, my attempts have not been successful so far. https://i.stack.imgur.com/CdXjw.png I envision my bookmarks looking something like t ...

I am looking to create a split div with a diagonal line running through

Is there a way I can create this Mockup using html5 and css3, but also add diagonal lines to divide the div? Any suggestions on how to achieve this? ...

The background image stubbornly refuses to stretch to the full width of the section container

Looking at my code example and the screenshot provided, it's clear that the image is not fitting into the container even when set to 100% width or utilizing other properties. Below you will see the code snippet: .about-us{ background-image: url(i ...

Concealing a button once the collapse feature is toggled in Bootstrap

The following code snippet from the bootstrap website demonstrates how to use collapse functionality: <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> Link with href & ...

Aligning text to the right in Bootstrap 5 input fields

I'm trying to align the values of my inputs to the right. Any suggestions on how to achieve this? Here's a visual representation of what I'm looking for. This is the snippet from my code: <td style="text-align:center; vertical-alig ...

Adjusting the size of the post title's font

Looking to decrease the font size of the latest post's title and keep it centered on my Jekyll based blog. I attempted to adjust https://github.com/x0v/x0v.github.io/blob/master/_sass/atoms/_feature-title.scss by adding font-size: 45px !important; f ...

Arranging items to be flush at the base of several columns

I need help with positioning buttons at the bottom of three columns of text. I want them to be aligned vertically on the page when the columns are side-by-side, and then placed after each column when viewed in a single-column layout on small screens. The c ...

How to implement a pop-up dialog box with multiple input boxes using AngularJS?

If you click on the link below: https://material.angularjs.org/latest/demo/dialog You'll notice that the prompt dialog box features only one input field. I'm curious to know if it's possible to customize this using mdDialog to include mult ...

Responsive design with Flexbox, interactive graphics using canvas, and dynamic content resizing

I'm having difficulties with my canvas-based application. I have multiple canvases, each wrapped in a div container alongside other content. These containers are then wrapped in an "hbox" container. The objective is to create a dynamic grid of canvas ...