Display a caption with a translucent color overlay when the mouse hovers over an image

I have created a code snippet that displays a caption with a semi-transparent red overlay when hovering over an image:

HTML:

<a href="http://www.domain.com/">
    <div class="thumb">
        <img src="http://www.domain.com/thumbnail.jpg" width="100" height="100" alt="" />
        <div>
            <span>Caption</span>
        </div>
    </div>
</a>

CSS:

.thumb {
    position: relative;
}
.thumb div {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #fe0000;
    color: #fff;
    opacity: 0;
    transition: opacity 0.5s;
}
.thumb img {
    display: block;
}
.thumb div span {
    display: block;
    position: absolute;
    bottom: 10px;
    left: 10px;
    font-size: 30px;
}

.thumb:hover div {
    opacity: 0.3;
}

I would like to change this code so that the caption is not semi-transparent but opaque when hovering over the image. Can anyone provide suggestions on how to accomplish this?

Answer №1

Instead of setting opacity to 0.3 for all div elements, you can achieve the same effect by using:

background: rgba(255,0,0,0.3);

After that, set the opacity to 1.0 within the div element:

opacity: 1;

Implementing this method will result in:

Here is an example: http://jsfiddle.net/EUUMX/

Answer №2

For a more effective background design, consider using background: rgba() instead of #fe0000; and adjusting the opacity to 1. Below is the revised CSS code for your reference:

CSS:

.thumb {
    position: relative;
}
.thumb div {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(255,0,0,0.3);
    color: #fff;
    opacity: 0;
    transition: opacity 0.5s;
}
.thumb img {
    display: block;
}
.thumb div span {
    display: block;
    position: absolute;
    bottom: 10px;
    left: 10px;
    font-size: 30px;
}

.thumb:hover div {
    opacity: 1;
}

Answer №3

Utilize a see-through backdrop utilizing background-color: rgba() as opposed to relying on opacity

Take a look at my newly created jsfiddle demonstration to see this in action: http://jsfiddle.net/pR3nZ/

Answer №4

Here is the solution provided: http://jsfiddle.net/fJ7gs/

<a href="http://www.domain.com/">
    <div class="thumb">
        <img src="http://www.domain.com/thumbnail.jpg" width="100" height="100" alt="" />
        <div class="hover">
            <span class="overlay"></span>
            <span class="caption">Caption</span>
        </div>
    </div>
</a>

.thumb {
    position: relative;
}
.thumb .hover {
    position: absolute;
    top: 0;
    left: 0;
    right:0;
    bottom:0;
    color: #fff;
    opacity: 0;
    transition: opacity 0.5s;
}
.thumb img {
    display: block;
}
.thumb .caption {
    display: block;
    position: absolute;
    bottom: 10px;
    left: 10px;
    font-size: 30px;
}

.thumb:hover .hover {
    opacity:1;
}

.thumb .overlay {
    display:block;
    height:100%;
    background: #fe0000;
    opacity: 0;
    transition: opacity 0.5s;
}

.thumb:hover .overlay {
    opacity: 0.3;
}

I attempted to change the color to #000 for clarity, as #fff may give the appearance of transparency even though it is not.

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

Enhance Your Button with CSS3 Animation

While experimenting with CSS3 animations, I encountered a challenge when trying to apply an animation to a button upon clicking. The desired effect was for the button to zoom in, spin, and then zoom out, giving the appearance of flying off the screen. Surp ...

Why are two vertical scrolls appearing on the screen simultaneously?

I utilized this method to hide the body scrollbar initially and then display it upon clicking a link: $('body').css('overflow', 'hidden'); $('#site').click(function(e) { $('#wrapper').remove(); $(& ...

Creating a navigation bar in React using react-scroll

Is anyone able to assist me with resolving the issue I am facing similar to what was discussed in React bootstrap navbar collapse not working? The problem is that although everything seems to be functioning properly, the navbar does not collapse when cli ...

What strategies can be implemented to stop the downloadthis button in a Quarto HTML report from suddenly moving to the top of the page when

My Quarto HTML report contains numerous download buttons, but each time I click on one, the browser automatically scrolls to the top of the screen. This issue occurs in both Chrome and Firefox. Is there a way to stop or prevent this behavior? For a comple ...

"Enhance Your Website with a Sticky Bootstrap Navbar and Seamless Scroll Design - Elevating Padding and Margin-

I am currently working on incorporating a bootstrap sticky navbar with a fixed height of 81px and smooth-scroll behavior into my project. The website's HTML structure includes section tags like <section class="section" id="news" ...

Loading Bootstrap Modal with click event triggering

I am currently working on a project where I need to load ajax content into a bootstrap modal when a link is clicked. I have been able to successfully load the content without any issues, but I am facing some difficulties triggering the modal window to open ...

Tips for reliably resizing slider images with varying widths

I am trying to scale '.slick-slide img' by height because the images vary in width. Scaling them by width would result in inconsistent proportions. However, when I apply a dimension to the height property for '.slick-slide img', the ima ...

Tips for showing a single table with buttons on display

I am using R markdown and have included multiple tables with buttons, but when I open the file, all tables are displayed at once. How can I ensure only one table is shown upon opening the file? https://i.sstatic.net/NFidf.png <script type="text/ja ...

How to Remove a CSS Class from an <li> Tag in ASP.net Using Code Behind

Currently, I am adding a CSS class to my li tag using the following code snippet: liComPapers.Attributes.Add("class", "NoDisplay"); Is there a way to remove this specific class (NoDisplay) from the li tag at a different location in my code? I have attem ...

How can an input field with a checkbox type be properly placed within a table data tag in a table nested within an AngularJS modal?

Below is the code for my modal: <!-- modal for viewing permissions --> <div id="modal-user-permissions" class="modal"> <div class="modal-content"> <h4 id= ...

Display a substitute image if there is no internet connection available to load the Google Map Canvas

I have a WebApp that runs locally, but it's possible that users may not always have access to 3G/WiFi when using the app. This means that the Google Map will not load without an internet connection since it requires the web API. In order to provide a ...

The jQuery append function does not incorporate CSS styling

I am currently facing an issue where my jQuery code successfully appends a piece of HTML, but the CSS styles are not being applied to it after the append operation. What is the correct approach to resolve this? This is the method I am using: if(listone[ ...

Ways to modify the gap between buttons using CSS

I am faced with a design challenge on my home page. I want to add some spacing between the buttons so they are not too close to each other, but for some reason margin-top and margin-bottom properties are not working as expected. Can you help me figure out ...

The error message "invalid module name" is preventing Phoenix from creating an HTML template

Encountering issues while trying to run the phx.gen.html templates. Below is the command that I am attempting: mix phx.gen.html Shipments shipmentroutes shipmentroute address:string date:string groups_involved:string An error message is displayed as fol ...

What is the best way to ensure the main container fills the entire screen?

Given: Bootstrap 5.1 Visual Studio 2022 Professional Edition Blazor Server Application How do I modify the container to occupy the entire screen without any margins? <div class="container bg-primary"> Hello World! </div> Thi ...

Converting HTML to plain text using the DOMDocument class

Is there a way to extract the text content from an HTML page source code, excluding the HTML tags? For example: <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="content-language" content="hu"/> <titl ...

Manipulating the .innerHTML property allows for selectively replacing sections

In my JavaScript code, I am trying to display a video along with a countdown timer. Once the countdown finishes, it should switch the content of the div to show a question. Below is my current implementation: <script type="text/javascript"> ...

How can one properly incorporate static CSS and JavaScript into a VueJS application?

There have been numerous inquiries regarding the proper way to incorporate static CSS, but I still find myself puzzled. Is placing the static CSS in the "static" folder the right approach? Various suggestions I stumbled upon online include: Importing th ...

Avoid button wrapping in Bootstrap 4 navbar

Is there a way to make the search bar shrink on mobile view while keeping everything in line? Currently, the button is wrapping underneath the search bar. Check out the solution on JSFiddle body { margin: 10px; } .navbar-container { display: fle ...

Making sure that the div elements are stacked vertically once the top div expands in size

I am dealing with a situation where I have two divs that showcase a list of elements for the user to interact with via a search bar. This is followed by a "Done" button to finalize their selection. <div class="dropdown col" id="dropdown-s ...