Utilizing jQuery to create a fade-in effect for li elements on hover

Working on a fresh WordPress theme, aiming to bring some lively animations to the pages compared to the previous interface.

Looking to incorporate an effect like a fade-in effect to my li:hover element. Any ideas on how to achieve this?

Sample CSS:

/*Videos*/
.PozVideos {float:left;width:940px;min-height:155px;margin:0px 0px 20px 0px;}
.PozVideos .Caption {float:left;width:930px;padding:0px 0px 10px 10px;margin-bottom:8px;border-bottom:1px solid #F8F8E6;height:25px;line-height:33px;font-size:14px;color:#fff;overflow: hidden;}
.PozVideos ul {padding:0px;margin:0px 0px 5px 7px;}
.PozVideos ul li {float:left;width:150px;height:100px;margin-right:5px;background:#F8F8E6;text-align:center;}
.PozVideos ul li img {float:left;width:140px;border:none;height:90px;padding:5px;}
.PozVideos ul li:hover {float:left;opacity:0.7;filter:alpha(opacity=70); /* For IE8 and earlier */}
.PozVideos .Title {float:left;margin:-35px 0px 0px 0px;width:150px;height:30px;line-height:15px;}
.TransationsImages {opacity:0.4;filter:alpha(opacity=40); /* For IE8 and earlier */}
.TransationsImagesHover {opacity:0.7;filter:alpha(opacity=70); /* For IE8 and earlier */}
.TransationsTitle {opacity:0.9;filter:alpha(opacity=0.9); /* For IE8 and earlier */}

.Pozn-img-play {
    background:transparent;
    position:relative;
    z-index:1;
    cursor:pointer;
    width:150px;
    height:100px;
    border:0px;

}

.Pozn-img-play:hover {
    background:url('img/play.png') no-repeat center center;
}

HTML:

<!--Videos-->
<div class="PozVideos BgPurple RadiusTopTen">
    <div class="Caption">Video Gallery</div>
    <ul>
        <li><div class="PotImage"><a href=""><img src="assets/demo/video.jpg" alt=""></a><div class="Pozn-img-play"></div></div></li>
        <li><div class="PotImage"><a href=""><img src="assets/demo/video.jpg" alt=""></a></div></li>
        <li><div class="PotImage"><a href=""><img src="assets/demo/video.jpg" alt=""></a></div></li>
        <li><div class="PotImage"><a href=""><img src="assets/demo/video.jpg" alt=""></a></div></li>
        <li><div class="PotImage"><a href=""><img src="assets/demo/video.jpg" alt=""></a></div></li>
        <li><div class="PotImage"><a href=""><img src="assets/demo/video.jpg" alt=""></a></div></li>
    </ul>
</div>
<!--Videos-->
jquerycssfadein

Answer №1

To achieve the desired effect, make sure to include the following CSS code in your stylesheet:

.Pozn-img-play {
        background:transparent;
        position:relative;
        z-index:1;
        cursor:pointer;
        width:150px;
        height:100px;
        border:0px;
        opacity: 1;
        transition: opacity .5s ease-in-out;
       -moz-transition: opacity .5s ease-in-out;
       -webkit-transition: opacity .5s ease-in-out;
}

.Pozn-img-play:hover {
        background:url('img/play.png') no-repeat center center;
        opacity: 0.1;
}​

Answer №2

Give this fiddle a try. Enhance the smoothness of the effect by incorporating jQuery rather than solely relying on CSS.

You have the option to utilize either fadeIn or fadeOut. One key benefit of implementing jQuery over CSS3 is improved compatibility across various browsers.

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

Using CSS and Bootstrap together in the Yii2 framework

Hey there, I'm new to Yii2 and recently put together a layout page. However, I seem to be having some trouble with my CSS - it's not fully loading, only parts of it are displaying correctly. Is there anyone out there who can lend a hand? This is ...

phphtmlcssyii2

You are limited to using a maximum of two custom tags within a custom div

I came up with this code that is supposed to style the elements differently based on their tag names. However, when I tested it, the styling did not work as expected. For example, 'London' should be displayed as a large and bold h1 text, while th ...

javascriptjqueryhtmlcssdom

What is the best way to attach a jQuery event to both existing and forthcoming elements?

After discovering that live() is now deprecated in jQuery, I have a quick inquiry regarding the most efficient, fastest, and up-to-date method to use. I have a function called myfunction() that I'd like to bind to all current and future elements with ...

jquerybindingjquery-selectorsdelegates

Can the value of the currently selected option in a select box be obtained without needing to submit the form?

I'm currently working on a project and facing a roadblock with the following task: My goal is to extract the selected value from a dropdown menu and utilize it in my PHP script. The challenge here lies in capturing the chosen option without requirin ...

phpjavascriptjqueryajaxinput

Select elements using jQuery in events while excluding others

I need to prevent form submission when the user presses Enter, except for three specific inputs. To prevent form submission on Enter key press, I can use this code: $(document).keydown(function(event){ if(event.keyCode == 13) { event.preventDefault(); re ...

javascriptjqueryevent-handlingaddeventlistenerjquery-events

Mastering the implementation of owl-carousel in React.js

I'm currently working on a project that involves utilizing the react framework. My intention is to incorporate the owl-carousel, however, I've encountered issues as it fails to function properly. The following error keeps popping up: OwlCarousel ...

javascriptjqueryreactjswebowl-carousel

Displaying a Bootstrap button and an input box next to each other

Looking for advice on aligning or arranging a button and input box side by side in Bootstrap without grouping. I've searched online for examples, but they all involve grouping of elements. jsfiddle: https://jsfiddle.net/erama035/p9dagmL3/3/ <div ...

htmltwitter-bootstrapcss

Troubleshooting jQuery's issue with dynamically adding input fields

I came across a tutorial (which I tweaked slightly) on this website: code In JSFiddle, everything works perfectly fine with the code. However, when I implemented it on my actual page, it's not functioning as expected. I've been trying to trouble ...

javascriptjqueryhtml

Comparing jquery ajax jsonp with angularjs $http json: A breakdown of two powerful ways

I have a scenario where I need to switch from using jquery to angularjs for a particular feature. Specifically, I am replacing jquery's ajax method with angularjs' $http method. This piece of code is responsible for enabling users to sign up for ...

jqueryangularjsajaxjsonpmailchimp

Retrieve the input field value without triggering the form submission

Is there a way to retrieve the current value of an input field, and then display information from a database based on that value without needing to submit a form? For example, imagine filling out a profile form and receiving an error message next to a fie ...

javascriptphpjqueryajaxforms

jQuery form validation with delay in error prompts

I am experiencing a strange issue with my HTML form validation function. It seems to be showing the alert div twice, and I can't figure out why this is happening. Adjusting the delay time seems to affect which field triggers the problem. Can anyone sp ...

javascriptjqueryhtml

Automatically populate the next dropdown menu depending on the answer provided in the previous field

Can you help guide me in the right direction with 2 questions I have? If the answer to the first question is 1, then I would like the following answer to automatically be populated as Yes. Please assist me! <div class="field"> <!-- Number of Em ...

phpjqueryhtmlforms

Adjusting the text size within the graphdracula library

I recently implemented a cool feature in my asp.net mvc4 application by adding a treeview using the graphdracula jQuery library. Here is a snippet of the code I used: <html> <head> <script type="text/javascript" src="~/Content/Scripts ...

jqueryasp.net.netcssasp.net-mvc-4

"The CSS animation effect for underlining text does not seem to be

I'm trying to create a CSS animation using the transform property. Specifically, I want to have an underline animation when a link is hovered over. Strangely, the code that works in another HTML file is not working here. Although the links change colo ...

htmlcsstransform

Decimal tally in React using JavaScript

I'm struggling with my counter code that is supposed to count from 0 up to a given number, but it seems to have issues with decimals. For example, if it's set to count to 4.5, it stops at 4.1 or when counting from 0 to 5.7, it stops at 5.1. I&apo ...

javascripthtmlcssreactjscounter

"Accessing JSON data results in a value of

I am having trouble retrieving the latitude and longitude from the JSON format. Unfortunately, when I try to access the data, it returns undefined. Below is the code I have been working on. To see the JSON format that is being returned, please take a look ...

jqueryjson

Customize cursor using CSS

I have a div with overflow: hidden that I am making scrollable by allowing the user to click and drag the background. There are links and buttons within this space. Here is the CSS I am using for this: #div-grabscroll { cursor: url(../img/op ...

javascriptcsshtmlcursor

Tips for sending username and password using jQuery

After spending countless hours attempting to submit my username and password through a query, I came across various solutions such as $.ajax({ username: "user", password: "password", url: "http://de.wikipedia.org/wiki/S", type: "GET", dataType:&ap ...

jqueryajaxproxy

Is it possible for me to utilize pure JavaScript for loading JSON data?

I am interested in dynamically creating a Google Map by loading data through AJAX. To achieve this, I am using a JSON object that mimics the structure of the GM API to construct the map and jQuery for AJAX loading. For example: "object": { "div": "ma ...

javascriptjqueryjsoneval

What is the best way to dynamically add getJSON's data to a div whenever the loadmore button is clicked?

When a page loads, my getJSON function displays its output in a div called myDiv. Now, I am looking to add a button at the bottom of the page. When the user clicks this button, I want to trigger another call to getJSON. Each time the button is clicked, I ...

javascriptjqueryhtmlajaxgetjson