The element should remain vibrant, yet it seems to be fading away

My situation is exactly as the title suggests - there's an element that should not be fading, but it is. The specific element in question is text overlaid on an image that fades when you hover your mouse over it.

HTML:

<div id="image-wrapper">
<ul id="team-members">
    <li class="tile-wrapper fade">
        <div class="tile">
            <img src="http://placehold.it/158x210" />
             <h3 class="bio bio-header" style="display:none;">Header</h3>
            <p class="bio bio-footer" style="display:none;">Information</p>
        </div>
    </li>
</ul>

jQuery

$(document).ready(function () {
$('.fade').mouseenter(function (ev) {
    $(this).fadeTo(150, 0.5);
    $(this).find('img').siblings().fadeIn(150);
}).mouseleave(function () {
    $(this).fadeTo(150, 1);
    $(this).find('img').siblings().fadeOut(150);
});
});

Fiddle: https://jsfiddle.net/oLckb6h3/4/

javascriptjqueryhtmlcss

Answer №1

An idea:

HTML

<div id="image-wrapper" >
    <ul id="team-members">
        <li class="tile-wrapper fade">
            <div class="tile">
                <div class="doFade">&nbsp;</div>
                <div class="info">
                    <h3 class="bio bio-header">Header</h3>
                    <p class="bio bio-footer">Information</p>
                </div>
                <img src="http://placehold.it/158x210"/>
            </div>
        </li>
    </ul>
</div>

CSS

ul {
    list-style-type:none;
}

.bio {
    padding:15px;
}

.tile {
    width:158px;
    height:210px;
    border: 1px solid black;
    position: relative;
}

.doFade {
    position: absolute;
    left: 0;
    background: #fff;
    top: 0;
    right: 0;
    bottom: 0;
    opacity: 0.5;
    display: none;
}

.info {
    position: absolute;
    left: 0;
    background: transparent;
    top: 0;
    right: 0;
    bottom: 0;
    display: none;
}

jQuery

$(document).ready(function() {
    $('.fade').mouseenter(function(ev) {
        $('.doFade', this).add( $('.info', this) ).fadeIn(150);
    }).mouseleave(function() {
        $('.doFade', this).add( $('.info', this) ).fadeOut(150);
    });
});

DEMO

Answer №2

Fade the img instead of the .fade element...

$(document).ready(function() {
    $('.fade').mouseenter(function(ev) {
        $(this).find('img').fadeTo(150, 0.5).siblings().fadeIn(150);
    }).mouseleave(function() {
        $(this).find('img').fadeTo(150, 1).siblings().fadeOut(150);
    });
});
ul {
    list-style-type:none;
}

.bio {
    padding:15px;
}

.bio-header {
    margin-top:-150px;
}

.tile {
    width:158px;
    height:210px;
    border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="image-wrapper" >
    <ul id="team-members">
        <li class="tile-wrapper fade">
            <div class="tile">
                <img src="http://placehold.it/158x210"/>
                <h3 class="bio bio-header" style="display:none;">Header</h3>
                <p class="bio bio-footer" style="display:none;">Information</p>
            </div>
        </li>
    </ul>
</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

Tips for displaying neatly formatted raw HTML code within an editable DIV element:

I am encountering an issue while attempting to display raw HTML within an editable DIV, as the <div> element is being turned into a comment. Here is the HTML I want to display (including the ``) : \`<div class="flexContainer">HE ...

javascripthtmlpretty-print

Embed the bootstrap menu within a customized div

I have a unique div containing a combination of CSS styles and a Bootstrap menu. My goal is to integrate the menu within the same div using CSS to achieve the following structure: ABOUT US - HISTORY QUALITY To accomplish this, I intend to insert the tex ...

htmltwitter-bootstrapcssnavbar

Pop-up - maintain the initial value

I'm working on a modal using Bootstrap and React. Inside the modal, there's a dropdown with an initial empty option: <select class="form-control" onChange={this.handleSelectCat}> <option disabled selected></option> < ...

javascripthtmltwitter-bootstrapreactjsbootstrap-modal

"Utilizing jQuery to select elements for the purpose of preventing default

$('input[name=boxes], .item_add a ').on('click', function(e) { e.preventDefault(); //perform common actions } Is it possible to stop the default scrolling behavior when clicking on a link [.item add a], while still allowing the defa ...

jqueryhtml

Issue with router failing to load default route upon application startup

I've been grappling with this issue for the past day and a half and have not made any progress. My goal is to load my angular app and have it default to a specific page when bootstrapped, but it keeps redirecting to a different route. The intended de ...

javascriptangularangular5

The menu lacks responsiveness

I'm looking to create a responsive menu on my website where the button that opens the navigation will be hidden in "desktop mode". I came across some information on w3school, but I seem to have made an error. Can you assist me with this, please? Thank ...

javascripthtmlcssmenunav

Customizing color schemes of bootstrap buttons and dropdown-toggle elements

My button group looks like this: HTML <div class="btn-group"> <button type="button" class="btn btn-default btn-xs red-outline-button"> Sync </button> <button type="button" class="btn btn-default btn-xs gold-outline-button" da ...

htmlcsstwitter-bootstrap

Divs that are 30% of their parent's width will not align vertically and will not fit in a parent div that is 100% width

I am attempting to vertically center the three child-divs <div class="section"> as 3 rows in one column within <div class="container_page_2">. When I refer to vertical alignment, I mean having an equal distance between the top of the page and ...

htmlcss

Generate a binary string using JavaScript and then transform it into C#

I have an upload section in my JavaScript program. I utilize JS FileReader to obtain a binary string of the uploaded document before sending it to my C# WebApi for storage on the server. JavaScript Code let myFile = ev.target.files[0]; if(myFile.size > ...

javascriptc#typescriptfilereader

Manage Blob data using Ajax request in spring MVC

My current project involves working with Blob data in spring MVC using jquery Ajax calls. Specifically, I am developing a banking application where I need to send an ajax request to retrieve all client details. However, the issue lies in dealing with the ...

javajavascriptajaxjqueryspring-mvc

Two rows of images with a horizontal scroll bar

Looking to create a grid of images where each image is displayed side by side. The goal is to have a fixed width and height for the container, with a horizontal scrollbar appearing if there are 12 or more images in the grid. Additionally, any overflow imag ...

css

Unusual behavior noticed with AngularJs authentication service

Updated: code in JavaScript I took the authentication (session) service from angular-app, and made significant modifications to it: angular.module('auth', []) .factory('session', ['$location', '$http', ' ...

javascriptangularjsauthenticationcoffeescriptangular-services

Creating a layout with a CSS div that has a height of 100

I've been utilizing this code to design the layout of my website. However, I've encountered an issue where the "left" and "right" divs are not displaying on the screen (they only show up when I set their height in pixels, not in percentages). Any ...

htmlcsslayout

Tips for positioning bootstrap dropdowns side by side in a row

I'm having trouble aligning my li items in a Bootstrap dropdown next to each other. I've tried everything but nothing seems to work. Here's my code: <nav class="navbar navbar-expand-lg navbar-light bg-light"> < ...

htmlcssbootstrap-5

Internet Explorer causing issues with Jasmine mocking ajax calls

Recently, I attempted to develop a spec that enables mocking out Ajax calls. The testing procedure functions seamlessly on browsers such as Chrome and Firefox; however, I encountered some difficulties while executing the test case on Internet Explorer (spe ...

javascriptjqueryinternet-explorertddjasmine

The icon on my page is not displaying, and the responsive menu is also not appearing

After tweaking the @media {} settings, I noticed that the icon displays properly when reduced, but disappears completely when fully covered with {}. Additionally, my responsive menu is not visible as expected. `@import url('https://fonts.googleap ...

javascripthtmlcssmedia-queriesfont-awesome

Is there a way to adjust the duration that specific slides appear in the Bootstrap4 carousel?

Is it possible to adjust the interval between slides in a carousel based on which slide is currently active? I need some slides to transition after 1000 milliseconds while others should transition after 5000 milliseconds. Additionally, I want to execute di ...

jquerybootstrap-4

Cookie parsing functionality in Node JS malfunctioning

Currently, I am working through a tutorial on cookie management in Express JS found at . The goal is to implement cookies in my web application to authenticate requests to an API that I am constructing with Node JS. To set the cookie upon user login, I emp ...

javascriptangularjsnode.jscookies

A guide on understanding tab-formatted text in a textarea using JavaScript (Vuejs)

Trying to decipher a text that has been copied into a Word table, the formatting is very confusing. I am looking to extract the rows as objects in an array, with the columns serving as properties of each object. I would like to accomplish this using Vuejs ...

javascriptwebvue.js

`Addressing issues with table cell layout for improved horizontal scrolling`

I am currently facing a challenge involving fixing the first and last column (.headcol, .lastcol) in a horizontally scrolling table, ensuring they always align to the left & right of the visible panel. My understanding was that position: absolute elements ...

css