Displaying text on top of an image with the help of jquery and

I found a tutorial on this website that I'm trying to follow. It involves creating a fading/darkening effect on image rollover with text appearing, but I can't seem to get it to work even when starting from scratch.

Despite having experience with jquery before, I'm struggling to troubleshoot why it's not working this time.

I've included all the code in my document:


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>;

<style type="text/css">
.wrapper { padding: 8px; background-color: #fff; border: 1px #0d5a2c solid; position: relative; width:300; height: 300; margin: 0 auto; }
.wrapper:hover { cursor: pointer; }
.description { display: none; background-color: #000; color: #000; position: absolute; left: 8px; top: 8px; text-decoration: none; font-size: 1.5em; width: 250px; height: 130px; padding: 120px 0 0 0; }
.description img { vertical-align: middle; margin: 0 2px 1px 0; }
</style>

<script src="jquery-1.3.1.min.js" type="text/javascript">
$(document).ready(function(){
    $('.wrapper').hover(function(){
        $(this).children('.description').stop().fadeTo(200, 0.8);
    },function(){
        $(this).children('.description').stop().fadeTo(200, 0);
    });
});
</script>

</head>

<body>
<div class="wrapper">
<img src="http://www.compuhex.co.uk/Version2/products2/blue.PNG" alt="Product 1" />
<a href="#" title="Click for More" class="description">
Want to read more?
</a>
</div>

</body>
</html>

You can view the live link here.

Apologies if the code looks messy, and thank you for any assistance provided.

In summary, I'm trying to figure out why the code isn't working despite following the tutorial closely. The technique demonstrated is exactly what I want to implement on my website. Thanks!

Answer ā„–1

It seems that you are using an outdated version of jQuery (1.3.1). In order for your code to work properly, you will need to use a version greater than 1.4;

http://jsfiddle.net/dwrUj/

In the example provided, you have placed your ready code within the <script src=.. element. To fix this issue, you should separate the two components like this:

<script src="jquery-1.7.2.min.js" type="text/javascript">
    $(document).ready(function(){
    ...
</script>

Change it to:

<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script type='text/javascript'>
    $(document).ready(function(){
    ...
</script>

Answer ā„–2

Update your code with the following:

<script src="jquery-1.3.1.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function(){  
 $('.wrapper').hover(function(){
 $(this).children('.description').stop().show().fadeTo(200, 0.8);
},function(){
    $(this).children('.description').stop().hide().fadeTo(200, 0);
});
  });
</script>

The code is functioning correctly, and there should be no issues with the version.

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

"An issue with PHP not receiving any data from AJAX POST request

I've been working on creating a login using AJAX. The issue I'm facing is that when the AJAX function posts data to the PHP file, the data is empty when trying to retrieve it in PHP. Here is my AJAX posting code: function validateUser() { var ...

The issue arises when the jQuery $.get() method fails to deliver the expected response to the client, despite returning a status code of

I am having trouble with sending a REQUEST to a server in order to retrieve a message. I have tried using the jQuery method $.get(), and it seems to have successfully reached the server. However, I am facing an issue where I am unable to send a RESPONSE b ...

What is the reason behind the issue where max-height disrupts border-radius?

My inline svg is styled with the following CSS: .img { border-radius: 15px; overflow: hidden; max-width: 70vw; margin-top: 6vh; max-height: 50vh; z-index: -1; text-align: center; } Everything seems to work as expected, except f ...

Error encountered while using getElementsByTagName in Greasemonkey on a webpage built with extJS, showcasing a basic scenario

Currently, I am experimenting with Greasemonkey on a web-app that constructs the DOM step by step utilizing a substantial amount of Javascript and making use of the extJS library. When there is no Greasemonkey code in operation, the site loads as expected ...

Is it possible to create a translucent glass floating box over HTML elements, similar to the frosted glass effect seen in iOS7?

Creating an overlapping div with a frosted glass effect typically requires using an image background (like ). I am interested in having a floating div (position:fixed) that can apply a frosted glass effect over any content below it, whether it be an image ...

Get the Label Values Based on CheckBox Status

Is there a way to retrieve the values of labels corresponding to checkboxes in HTML? I have multiple labels and checkboxes next to each other, and I want to be able to get the label values if the checkbox is checked. Can you provide guidance on how to do ...

Performance challenges with an AngularJS application that uses pagination

Resolving Performance Issues in Paginated AngularJS Posts Application I developed a compact application that showcases JSON data as cards using AngularJS and Twitter Bootstrap 4. The app includes pagination with approximately 100 posts per page. var ro ...

"Enhance your images with dynamic captions using jQuery

Struggling to create an image caption that only appears when hovering over the specific image? Not sure how to select the correct object? The caption is working, but it's appearing for all images at once. I have attempted to target a single image wit ...

Issues with functionality of Bootstrap 5 popover in responsive JavaScript DataTable

As I work on constructing a web page for my hobby, I am utilizing Bootstrap 5.3.3 and JS DataTables 2.0.5. Within the page, there is a table displaying data about various players. I have implemented a feature where clicking on certain cells triggers a popo ...

Minimize white spaces when validating input fields in a form using Javascript

I'm currently facing a challenge with JavaScript, specifically regarding achieving five tasks without using jQuery. Despite trying various RegExp codes, none have successfully worked for me so far. Let's begin with the first task (number 1): El ...

Discover the following `<td>` identifier through the act of clicking on a separate `<td>` element

I have a few td's with specific ids: <td id="first">first</td> <td id="second">second</td> <td id="third">third</td> <td id="fourth">fourth</td> Whenever I click on one of the td elements, I want to re ...

"Exploring the versatility of using variables in jquery's .css

Iā€™m facing an issue where I need the rotation of a div to be based on the value stored in "anVar." This is what I currently have: function something() { $('.class').css('-webkit-transform:rotate('anVar'deg)') } The desi ...

Tips for extracting both the div and entire inner content using JavaScript

I need to retrieve the inner content of a div using JavaScript For example: <div id="content" style="height: 20px; overflow: hidden"> content<br>content<br>content<br> </div> This is my HTML code. I only know the div&apos ...

Getting Bootstrap columns to work well with Angular ng-show

I am working with three columns in Bootstrap, all set to col-md-4 width. The middle column has an ng-show attribute that may hide it at times. When the rightmost column becomes visible due to friend requests, it displaces the middle column if it's hid ...

Enhance form validation by utilizing jquery.validate to display appropriate icons indicating correct and incorrect input, with the option to

Trying to replicate the functionality of the jQuery validate plugin demo seen here, I am facing an issue on my own website. Upon clicking submit after the page loads, the plugin displays validation messages with a cross symbol. However, upon entering text, ...

Updating Checkbox Appearance in Angular 6 Based on its Checked Status

I have created a checkbox list and I am trying to style the checked item with an underline. Here is my code snippet: TS file: currentQuarter: string; quarters: Observable<MeseRiferimento[]>; q1: MeseRiferimento = new MeseRiferimento(); q2: MeseRife ...

What is the process for specifying the content type as application/json in an Ajax request?

Do you have a smart contract named GovtContract that functions properly when utilizing curl commands? $curl -X POST -H "Content-Type: application/json" localhost:3000/govtcontract/set -d '{"value":"5"}' | jq $curl -X GET -H ...

Struggles with fading in and out

I'm currently working on enhancing a pure CSS rollover with a smooth transition/fade effect, but I'm encountering some difficulties in achieving the desired outcome. The concept involves displaying a new div called "online-hover" when hovering o ...

difficulty with displaying the following image using jquery

I have referenced this site http://jsfiddle.net/8FMsH/1/ //html $(".rightArrow").on('click',function(){ imageClicked.closest('.images .os').next().find('img').trigger('click'); }); However, the code is not working ...

Adjusting the panel dimensions based on the screen size

One feature on my website is a sliding panel (Image 1) located on the right side. It appears and disappears when a button is clicked, covering the entire height of the screen.https://i.sstatic.net/dF5Zc.jpg Here's the CSS code for this sliding panel- ...