When hovering the mouse over, the text fails to appear

Is there something wrong with my overlay on this image? It darkens when I mouse over, but the text I want to display does not show up. Any ideas?

http://jsfiddle.net/cryycw3n/

HTML

<div class="square">
    <div class="info">
        <h2>This is a test</h2>
    </div>
    <div class="bg-image img-responsive square" style="background-image:url(http://lorempixel.com/500/500/sports/)"></div>
</div>

CSS

.square{
    width: 100%;
    height: 0;
    padding-bottom: 100%;
}
.bg-image{
    background-position: center;
    display: inline-block;
    position: relative;
    text-align: center;
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: cover;
    color: rgba(255,255,255,1);
    transition: color .25s ease;
}

.bg-image:before{
    position: absolute;
    content: " ";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 0;
    transition: opacity .25s ease;
    background-color: rgba(0,0,0,0.75);
}

.info{
    z-index: 100;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    pointer-events: none;
    height: 200px;
    text-align: center;
    color: rgba(255,255,255,1);
    opacity: 0;
    transition: opacity .25s ease;
}

.bg-image:hover:before, .bg-image:hover:before .info{
    opacity: 1;
}
htmlcss

Answer №1

Looking for a solution similar to this example?

This is achieved with pure CSS by adding the following rule:

.square:hover > .info:not(:hover){
    opacity: .4;
}

When you hover over the parent element .square, and not hovering over the text (i.e., hovering over the image), the text will be displayed with customizable opacity.

Hoping this workaround meets your requirements!

.square{
    width: 100%;
    height: 0;
    padding-bottom: 100%;
}
.bg-image{
    background-position: center;
    display: inline-block;
    position: relative;
    text-align: center;
    cursor: pointer;
    background-image:url(http://lorempixel.com/500/500/sports/);
    background-repeat: no-repeat;
    background-size: cover;
    color: rgba(255,255,255,1);
    transition: color .25s ease;
}

.bg-image:before{
    position: absolute;
    content: " ";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 0;
    transition: opacity .25s ease;
    background-color: rgba(0,0,0,0.75);
}

.info{
    z-index: 100;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    pointer-events: none;
    height: 200px;
    text-align: center;
    color: rgba(255,255,255,1);
    opacity: 0;
    transition: opacity .25s ease;
}

.bg-image:hover:before, .bg-image:hover:before .info{
    opacity: 1;
}

.square:hover > .info:not(:hover){
    opacity: .4;
}
<div class="square">
    <div class="info">
        <h2>This is a test</h2>
    </div>
    <div class="bg-image img-responsive square"></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

All the optgroups in the select picker are being duplicated from the first optgroup

I am currently facing an issue with a select picker multiple dropdown. When I add optgroups, the values of the second and third optgroups are being copied by the first optgroup. The opt-groups are being populated via JavaScript. <select class="mod ...

htmljquerybootstrap-5bootstrap-selectpicker

Flex-boxes are set inside a fixed-positioned div in this chat web application

I am currently working on a chat web application that has a unique bottom bar layout. The bottom bar consists of a button on the left, a text entry field in the center, and another button on the right: <div id="bottom-bar"> <div class=" ...

htmlcssflexbox

What is the best way to determine if a date is empty using Vuetify?

Could someone help me with checking if a date was entered by the user? I want to display an error message if a date is not provided. I attempted to use a rule for this purpose, but unfortunately it's not showing any error message. Below is the code I ...

htmlvue.jsvuetify.js

Can anyone share tips on how to effectively center navbar link items with Bootstrap?

I recently tried to center the navigation links on my website using Bootstrap. I followed the instructions on the w3schools documentation and also watched a YouTube video for additional guidance. Both resources suggested adding the justify-content-center c ...

htmltwitter-bootstrapbootstrap-5

Discover the perfect technique to employ insertString for effortlessly adding a new line onto a JEditorPane integrated with HTML functionality

Is there a difference between executing this code: conversationPane.setText(msg + conversationPane.getText()); and this code? conversationPane.setText(conversationPane.getText() + msg); I noticed that the second line does not display the message, but I ...

javahtmljeditorpaneappendtext

Altering hues upon clicking the link

I'm looking for a way to set up my menu in the header using "include/header.php" and have it so that when I click on a link, it takes me to that page while also changing colors to indicate it's active. Would jQuery or PHP be more suitable for thi ...

phpjqueryhtmlcss

The full height of the image cannot be captured by html2canvas

It baffles me that html2canvas is failing to capture the full height of the div. html2canvas($container, { height: $container.height(), onrendered: function(canvas) { var data = canvas.toDataURL('image/png'); ...

javascriptjqueryhtmlcsshtml2canvas

The ng-View feature appears to be malfunctioning within AngularJS

I'm extremely new to AngularJS and am having trouble with ng-view. Here is the code from AngularFormsApp.js: var angularFormsApp = angular.module('angularFormsApp', ["ngRoute"]); angularFormsApp.config(function ($routeProvider) { $routeP ...

javascripthtmlangularjs

Is it possible to use jQuery to highlight HTML tags within a textarea field?

Is there a simple method using jQuery to highlight html-tags in red within a textarea? I'm clueless about how to achieve this since HTML tags aren't allowed in textarea, correct? :( Alternatively, can someone provide me with some helpful resour ...

jqueryhtmltagstextareasyntax-highlighting

I am attempting to retrieve the aria-expanded value using JavaScript, however, I keep receiving an "undefined" response

I'm attempting to dynamically change the class of a <span> element based on the value of the attribute aria-expanded. However, I am encountering an issue where it returns "undefined" instead of the expected value of true or false. Below is the ...

javascriptjqueryhtmltwitter-bootstrap

Sending form input values to JavaScript

Struggling to design a webpage featuring one text box and a button that, when clicked, sends the value to Javascript for further processing? After spending significant time troubleshooting, I'm unsure of what's causing the issue. Below are both t ...

javascripthtml

I'm experimenting with using jQuery toggle to switch between text and images on my webpage

I attempted to use jquery "toggle" in order to hide the div containing text and display an image instead, and vice versa. However, when I click on the button, it does not work as expected. The button is from a bootstrap example - could that be the source o ...

javascripthtmljquery

Creating a dropdown menu in AngularJS using the ng-repeat directive

I have recently started working with AngularJS. I am trying to create three tickets using ng-repeat, each containing a dropdown list to select the number of tickets. However, I am facing an issue where the selected number is not displaying in the span. Can ...

javascripthtmlangularjs

Showing nested div elements in a single row

I'm currently dealing with a react component that generates nested divs. My goal is to make sure all the divs are displayed on the same line, but the catch is I can only apply styles to the outermost container div. Is there a way to achieve this witho ...

htmlcssreactjs

What is the best way to retrieve the duration of an object tag using JavaScript or jQuery?

My goal is to determine the duration and length of only mp4 type videos. Although I used the video tag to retrieve these values, it does not support mp4 files. Despite several attempts, I was unable to get the video tag to play only mp4 files, as it stric ...

javascriptjqueryhtml

Dynamic elements create an interactive horizontal scrolling experience

I have square elements that will be displayed in a row on the screen extension. These elements are generated dynamically, starting with 2 and going up to 50. Depending on the screen size and number of elements, there may be overflow. In such cases, I want ...

css

Tips for nesting an anchor tag within another tag

After reviewing various inquiries on this platform, it has been commonly believed that embedding an anchor tag inside another anchor tag is not achievable. However, I recently stumbled upon a website that successfully accomplishes this and I am curious to ...

html

Tracing the variable passed by Jquery (AJAX) within the PHP code on the server to identify and

My web-hosted server has a PHP file in a specific folder. I want to send data from an HTML form using Jquery AJAX and view those variables in the PHP code on the server side. Here is my Jquery AJAX code: function sendtoServer() { $.ajax({ ur ...

phpjqueryhtmlajax

Unexpectedly, the jQuery get function retrieves the entire webpage

I'm encountering difficulties when using .get requests to update elements through page load or button press. Here is the code snippet... $(document).ready(function() { //updateVariable(); $('#dannychoolink').html('<?php dan ...

jqueryhtmlajaxget

Having trouble using jQuery to target the element "(this)"?

Currently, I am delving into jQuery and have stumbled upon a section that perplexes me. Due to my lack of familiarity with the terminology, conducting an effective Google search has proven difficult. Therefore, I decided to craft this question to elucidate ...

jqueryhtmlcsshover