Explore the jQuery feature that allows you to hover over text

I'm facing an issue that has got me a bit stuck on how to resolve it.

Currently, when hovering over this specific image, the opacity decreases (exposing a background color) and text appears. However, I want this effect to persist even when hovering over the displayed text.

Would adjusting the z-index help in this situation? I tried it but didn't seem to work...

JSFIDDLE http://jsfiddle.net/4jrUp/

HTML

<a class="bg" href="">
            <h1 class="first_title">FrameMonkey</h1>
            <img class="portfolio-item" src="http://blog.gettyimages.com/wp-content/uploads/2013/01/Siberian-Tiger-Running-Through-Snow-Tom-Brakefield-Getty-Images-200353826-001.jpg">
            <h3 class="first_description">A project that I've been working on since June - check back soon to see it in my portfolio!</h3>
        </a>

CSS

.portfolio-item:hover {
    overflow: hidden;
    z-index: 1;
    opacity:0.1;
}
.portfolio-item, .bg {
    height: 200px;
    width: 200px;
    left: 0px;
    border-radius:25px;
    position:absolute;
}
.bg {
    background-color: rgba(48, 48, 48, 0.9);
    top: 100px;
    display:inline-block;
}
.first_title {
    position: absolute;
    z-index: 100;
    color:white;
    left: 10px;
    font-size: 15pt;
    opacity: 0;
}
.first_description {
    top: 50px;
    position: absolute;
    z-index: 100;
    color:white;
    left: 10px;
    font-size: 12pt;
    opacity: 0;
}

Javascript

$(".portfolio-item").hover(function () {
    $(".first_description").css("opacity", "1");
    $(".first_title").css("opacity", "1");
}, function () {
    $(".first_description").css("opacity", "0");
    $(".first_title").css("opacity", "0");
});

Thank you!

javascriptjqueryhtmlcsshover

Answer №1

You can achieve this without using jQuery.

Check out the updated example here - I also included an optional transition.

To create the desired effect, make sure to style the parent element with the class .bg as a block-level element with specified border-radius and dimensions. It's important that it is relatively positioned for the children elements to be absolutely positioned relative to the parent.

.bg {
    background-color: rgba(48, 48, 48, 0.9);
    position:relative;
    height:200px;
    width:200px;
    display:block;
    border-radius:25px;
    overflow:hidden;
}

The hover effect is achieved by simply adjusting the opacity property.

.bg:hover .first_title, .bg:hover .first_description {
    opacity:1;
}
.bg:hover .portfolio-item {
    opacity:.1;
}

Additional CSS styling includes:

.portfolio-item {
    height: 200px;
    width: 200px;
    position: absolute;
}

.first_title, .first_description {
    position: absolute;
    color: white;
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    z-index: 1;
    opacity: 0;
}

.first_title {
    font-size: 15pt;
}

.first_description {
    top: 50px;
    font-size: 12pt;
}

Answer №2

Consider adding the hover event to the .bg element instead of the .portfolio item, which allows for the removal of the z-index property.

Here is the jQuery code modification:

    $(".bg").hover(function () {
       $(this).children(".first_description").css("opacity", "1");
       $(this).children(".first_title").css("opacity", "1");
    }, function () {
       $(this).children(".first_description").css("opacity", "0");
       $(this).children(".first_title").css("opacity", "0");
    });

Additionally, make these CSS adjustments:

.first_title {
    position: absolute;
    //z-index: 100;
    color:white;
    left: 10px;
    font-size: 15pt;
    opacity: 0;
}
.first_description {
    top: 50px;
    position: absolute;
    //z-index: 100;
    color:white;
    left: 10px;
    font-size: 12pt;
    opacity: 0;
}

View this example on JSFiddle

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

Is there a reason why the slide up feature is not working when I include the ul tag?

I need help with a jQuery code that will pull up/slide up an Html "p" tag when my page finishes loading. This snippet of jQuery code seems to be working fine: $(function () { $('.graybgc').slideUp(0); }); This is the HTML structure: <p ...

javascriptjqueryhtmlcss

How to create a fresh factory instance in Angular Js

I have implemented a factory in my application to retrieve a list of folders and display it on the front end. Additionally, I have a form on the front end where users can add new folders to the existing list. After adding a folder, I need to refresh my fac ...

javascriptangularjsangular-factory

Encountering a module injection error in AngularJS related to the ui.grid feature during my first experience with it

Trying to develop an AngularJS app, encountering the following error upon running the code: Uncaught Error: [$injector:modulerr] Failed to create module myApp: Error: [$injector:modulerr] Failed to create module ui.grid: Error: [$injector:nomod] Module &a ...

javascriptangularjs

Exporting a VueJS webpage to save as an HTML file on your computer

Scenario: I am working on a project where I need to provide users with the option to download a static export of a webpage that includes VueJS as a JavaScript framework. I attempted to export using filesaver.js and blob with the mimetype text/html, making ...

javascripthtmlvue.js

struggling to send variables to jade templates with coffeescript and express.js

As a newcomer to node and express, I am currently building the front end of an application that utilizes jade as its templating engine. Despite extensive searching online and within this community, I have not been able to find a solution to a particular is ...

javascriptnode.jsexpresspug

The button labeled as "hamburger" on my navigation bar seems to be malfunctioning (using bootstrap)

Recently, I've been facing an issue with the "hamburger" button in my navbar. Whenever I click on it, nothing seems to happen. This was not a problem before, and now I can't seem to figure out what went wrong or where the error lies. If anyone c ...

htmlcssbootstrap-4

The class [AdminController] being targeted does not exist

https://i.sstatic.net/r6c7q.pngI encountered an issue where a user is redirected from login to the admin page (e.g. ), and a 403 error should be triggered if the user is not logged in as an admin. Interestingly, even the admin experiences the same error. ...

phphtmlcssmysqllaravel

A pop-up window displaying an electron error message appears, but no errors are logged in the console

In a Nutshell: While developing a single-page website with Electron, I encountered the common issue of jQuery not being globally accessible. To tackle this problem, I decided to simplify it by using a quick start example, but unfortunately, I'm strugg ...

javascripthtmljqueryelectron

Scripts added to the layout page are not functioning correctly in ASP.NET MVC 5

During the development of my ASP.NET project, I encountered an issue where scripts that were placed in the "Head" section of my layout page were not accessible for use in the rendered view. The code snippet from my layout page looks like this: <!DOCT ...

jqueryhtmlasp.netasp.net-mvctwitter-bootstrap

In NextJs SSR, external components from a different package do not inherit styles when applied

I have incorporated an external react component into my Next.js app code. Here is a snippet of how the component appears: <AppBar className={clsx(classes.header)}> </AppBar> export const header = makeStyles((theme) => ({ header: { ...

cssreactjsnext.jsmaterial-uiserver-side-rendering

Parcel js is encountering difficulties running the same project on Ubuntu

I have encountered an issue with my JavaScript project when trying to run it on Ubuntu using parcel 2 bundler. The code works perfectly fine on Windows, but in Ubuntu, I am facing errors. Despite trying various solutions like cleaning the cache and reinsta ...

javascriptnode.jsnpmparceljs

Using jQuery ajax and PHP to add information to a MySQL database

I've been puzzling over how to use jQuery's ajax() function to post form data from a textarea to a mysql database. The problem is, I'm struggling to grasp the underlying concept. Imagine there's a form: <form method="post" action=" ...

phpjqueryajax

Maximizing the Use of Multiple Conditions for Styling in AngularJS

I have a table where I need to set different colors based on the values in one of the columns. I've successfully managed to set two colors using NgClass, but I'm unsure how to set up three different conditions. <scri ...

javascriptangularjs

Having trouble loading select fields using AJAX within Wordpress? Update and find a solution!

UPDATE: I am struggling to iterate through the response object and populate a select field using my ajax function. Although I have tried using a for loop instead of each(), the select field gets populated with "undefined". Any suggestions on how to resolve ...

javascriptphpjqueryajaxwordpress

Creating a pair of linked dropdown menus in ReactJS that open simultaneously

Having two dropdown menus can be a bit cumbersome, especially when you have functions dedicated to opening each one individually. It would be more efficient to combine them into one function for simplicity. If anyone has a solution for this, I would greatl ...

javascriptreactjsdrop-down-menureact-hooks

Is it possible to adjust the height of a window on mobile using CSS or jQuery?

I'm facing an issue with window height on mobile browsers. I am using css 100vw, but it's not always accurate, especially when the browser displays additional elements like a navigation bar at the top or functional buttons at the bottom. In simp ...

htmljquerycssiosmobile

Utilizing the power of jQuery alongside Angular 4

I am trying to display a bootstrap modal but keep encountering an error message: SectionDetailComponent.html:54 ERROR TypeError: $(...).modal is not a function This is how my .angular-cli file looks like: "scripts": [ "../node_modules/jquery/dist/jq ...

jqueryangulartypescriptbootstrap-4

What is the process of exporting a module that has been imported in ES6?

Here are 3 code snippets: // ./src/index.ts const myApp = { test: 1, ... } export default myApp // ./src/app.ts import myApp from './src/index' export default myApp // ./index.vue import { example } from './src/app.ts' console.l ...

javascriptvue.jsecmascript-6vite

Using the entire row as a toggle mechanism to select items in an office-ui-fabric detailslist, instead of relying on a small checkbox for selection

Currently, I am utilizing Office UI Fabric React components and I am aiming to enhance the default selection behavior for a DetailsList. At present, there is a difference in functionality between clicking on a row and clicking on the small checkbox located ...

javascriptreactjstypescriptoffice-ui-fabric

Associating data with controller upon click event

My application displays a tab full of objects for the user to choose from by clicking on any line. Once they make their selection, I need to send specific data related to that object to the server. This is what the interface looks like: https://i.sstatic ...

javascripthtmlangularjs