Ways to toggle the sliding of text on and off an image?

After spending some time experimenting with my code, I managed to get it working. Essentially, when a user hovers over an image, text now appears over the image.

Since this is a gallery, I had to utilize $(this).children in order to target and display the correct element.

However, I'm facing an issue with sliding toggling the h2 .nom_realisation. Despite trying various approaches, I haven't been successful in achieving the desired effect. If anyone could provide guidance on how to resolve this issue, it would be greatly appreciated.

DEMO : http://jsfiddle.net/Vinyl/725hcc62/1/

CODE :

CSS

.hide {
    display : none;
}
.text {
    z-index:100;
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width: 100%;
    text-align: center;
    display: table;
    background: rgb(134, 0, 0);
    /* Fall-back for browsers that don't support rgba */
    background: rgba(134, 0, 0, .7);
}
h2.nom_realisation {
    color: #ffffff !important;
    font-family:'Oswald', sans-serif;
    font-size: 30px !important;
    font-weight: 300 !important;
    text-transform: uppercase;
    text-decoration: none !important;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    display: table-cell;
    width: 100%;
}
h2.nom_realisation a, h2.nom_realisation a:hover {
    color: #ffffff !important;
    text-decoration: none;
}
.container_img img {
    position:absolute;
    left:0;
    top:0;
}
.container_img {
    height:232px;
    width:232px;
    position:relative;
}
.image_test {
    width:232px;
    height: auto;
}

HTML

<div class="container_img">
    <div class="container_nom_realisation hide">
        <div class="text">
             <h2 class="nom_realisation">Lorem ipsum</h2>

        </div>
    </div>
    <img class="image_test" src="https://www.google.fr/images/srpr/logo11w.png" />
</div>

JavaScript / jQuery

(function ($) {

    $(document).ready(function () {


        $(".container_img").hover(function () {

            $(this).children('.container_nom_realisation').show('slow');
            $(this).children('.text').slideToggle('slow');

        }, function () {
            $(this).children("img").fadeTo(200, 1)
                .end().children(".text").hide();
            $(this).children('.container_nom_realisation').hide('slow');
            //.end().children(".hover").slideToggle("slow");

        });
    });

})(jQuery);

Answer №1

  • .nom_realisation is not a direct child of .container_img, so you should use .find() instead of children.
  • You may encounter difficulties animating a table-cell element with slide animation. Consider displaying it differently or wrapping your <h2> in another element acting as a table cell (assuming you are using table-cell for vertical centering).

HTML

<div class="container_img">
    <div class="container_nom_realisation hide">
        <div class="text">
            <div class='table-cell'>
                 <h2 class="nom_realisation">Lorem ipsum</h2>

            </div>
        </div>
    </div>
    <img class="image_test" src="https://www.google.fr/images/srpr/logo11w.png" />
</div>

CSS

.hide {
    display : none;
}
.text {
    z-index:100;
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width: 100%;
    text-align: center;
    display: table;
    background: rgb(134, 0, 0);
    /* Fall-back for browsers that don't support rgba */
    background: rgba(134, 0, 0, .7);
}
.table-cell {
    vertical-align: middle;
    display: table-cell;
}
h2.nom_realisation {
    color: #ffffff !important;
    font-family:'Oswald', sans-serif;
    font-size: 30px !important;
    font-weight: 300 !important;
    text-transform: uppercase;
    text-decoration: none !important;
    margin: 0;
    padding: 0;
    width: 100%;
}
h2.nom_realisation a, h2.nom_realisation a:hover {
    color: #ffffff !important;
    text-decoration: none;
}
.container_img img {
    position:absolute;
    left:0;
    top:0;
}
.container_img {
    height:232px;
    width:232px;
    position:relative;
}
.image_test {
    width:232px;
    height: auto;
}

JavaScript

(function ($) {
    $(document).ready(function () {
        $(".container_img").hover(function () {
            $(this).children('.container_nom_realisation').show('slow');
            $(this).find('.nom_realisation').slideToggle('slow');
        }, function () {
            $(this).children("img").fadeTo(200, 1)
                .end().children(".text").hide();
            $(this).children('.container_nom_realisation').hide('slow');
            //.end().children(".hover").slideToggle("slow");
        });
    });
})(jQuery);

JSFiddle

Answer №2

I am uncertain if this aligns with your needs, but if it matches my understanding, you can achieve this using pure CSS...

<div class="container-img">
    <div class="image-title">LOREM IPSUM</div>
    <img class="image" src="https://www.google.fr/images/srpr/logo11w.png" />
</div>

.container-img{
    position: relative;
    background: #cccccc;
    width: 230px;
    overflow: hidden;
}
.container-img .image-title{
    position: absolute;
    background: rgba(0,0,0,0.8);
    opacity: 0;
    margin: 0 auto;
    padding: 200px 0 0 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    color: #ffffff;
    text-align: center;
    -webkit-transition: all 0.35s;
    transition: all 0.35s;
    z-index: 10;
}
.container-img:hover .image-title{
    opacity: 1;
    padding: 35px 0 0 0;
}
.container-img .image{
    position: relative;
    max-width: 100%;
    z-index: 0;
}

You can view a demo on Fiddle: http://jsfiddle.net/rk16vhwe/

Answer №3

It appears that using an underscore in the CSS classname may not be allowed: nom_realisation. It is recommended to rename it to something like nomRealisation.

Learn more about valid characters in CSS class names/selectors here.

Answer №4

Remove the following line:

$(this).children

In addition, the $(this) function is being called excessively! Just call it once and then utilize the variable.

var currentElement = $(this);

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

Organizing outcomes from a for each function into an array using javascript

I have a form with multiple values of the same name, and I need to arrange this data in an array before sending it via AJAX. However, when I try to do this using the .push function, I encounter an error that says "Uncaught TypeError: dArray.push is not a f ...

The oncanplaythrough event is not functioning properly in Internet Explorer

I am facing an issue where the beep sound trigger upon receiving an API response works perfectly in Chrome and Firefox browsers, but unfortunately, it does not work in Internet Explorer. if ($scope.totalQueueList) { var audio = new Audio(); audio.s ...

Animated slide-out menu with icon using jQuery

I am in the process of creating a menu using CSS and jQuery that will display an icon for each menu item. When a user hovers over a menu item for 0.5 seconds, I want it to slide slowly to the left to show the name of the menu. This is similar to what you ...

Sending an Ajax request to the current page results in receiving both the data and the entire

I am looking to implement a form on my website where users can input information and have it sent to a PHP script within the same file. While I understand that separating the PHP into its own file is the best practice, I am determined to make this method w ...

The Django framework does not apply color to the Bootstrap Navbar as expected

I'm currently working on building an E-Commerce Website using Django. I have implemented a Bootstrap navbar, but the CSS styles that I obtained from this source are not functioning properly when placed within the {%block css %} tag. I have attached t ...

Determine the number of elements chosen within a complex JSON structure

I need to figure out how to count the length of a jsonArray, but I'm stuck. Here's an example to start with: https://jsfiddle.net/vuqcopm7/13/ In summary, if you click on an item in the list, such as "asd1", it will create an input text every t ...

ReactJS is failing to render the component

Background: In my dissertation project, I made the choice to utilize React in order to incorporate a table into the webpage, allowing users to select which room they want to enter. Currently, I am using SWIG as a tempting engine to generate the table when ...

Discovering the specific value within an array of various objects through Angular

Within a list of objects, I am specifically looking to extract the name "sample 4" from the second set of objects with an ID of 2. How can this value be retrieved using JavaScript or Angular? {Id: 1, name: sample 1, code: "type", order: 1} {Id: 1, name: ...

Confirming a pop-up in Rails only when the checkbox is checked prior to saving to the database

I have encountered the following issue: Within a form for adding a new project on the 'projects/new' page, there is a checkbox that controls the 'is_public' attribute of the project. I want to display a JavaScript confirmation popup to ...

Tips for implementing `overflow-x: hidden` on a `ValueContainer` when using `isMulti` in react-select V2

I'm currently grappling with finding a solution to have a react-select V2 component, configured as isMulti, hide selected values that exceed the width of the ValueContainer rather than breaking to a new line and expanding the component's height. ...

The ace.edit function is unable to locate the #javascript-editor div within the mat-tab

Having trouble integrating an ace editor with Angular material Error: ace.edit cannot locate the div #javascript-editor You can view my code on StackBlitz (check console for errors) app.component.html <mat-tab-group> <mat-tab label="Edito ...

Using curly braces when invoking a function from HTML within a Vue.js application

When I call a function, for example on click, it works whether or not I use curly braces. However, I have created a function that triggers a custom event from a child component. I then await this event in a parent component and update the state with my par ...

What is the best way to navigate to a component that has been imported in Vue.js?

I have knowledge of Vue's scrollBehavior function, but I am struggling to integrate it with my existing code. On my Index page, I have sections composed of imported Vue components like this: <template> <div class="Container"> <Ab ...

retrieve the source code from all .js links found within the document

There is a file labeled urls.txt. https://website.tld/static/main_01.js https://website.tld/static/main_02.js https://website.tld/static/main_03.js .... All the source code from every .js file in allsource.txt needs to be extracted. Instructions: To ge ...

How can I add a character at a precise location while keeping the existing tags intact

Latest Update After further testing, it seems that the code performs well with a faux spacer, but runs into issues with the regex. The following scenarios work correctly: Selecting words above or below the a tag Selecting just one line directly above or ...

Tips on how to showcase up to 200 characters from a string

<?php include ($_SERVER['DOCUMENT_ROOT'].'/header.php'); include ($_SERVER['DOCUMENT_ROOT'].'/adtop.php'); if(mysql_num_rows($deals) > 0){ while($row = mysql_fetch_assoc($deals)){ echo '<div id= ...

Improper Placement of Bootstrap 5 Modal

I seem to be facing an unexpected issue where the Bootstrap 5 Modal and other components are displaying inside the sidebar menu instead of the main content area. Has anyone encountered this problem before? How can it be resolved? Here is a test example: ...

Manage image placement using CSS object-position

I have the following code snippet: img{ width: 100%; height: 1000px; object-fit: cover; object-position: left; } <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

Assigning a changing label to a radio button

Looking to create a dynamic form where clicking a button calls a JavaScript function. Here's the code snippet: function addRadioButton(type){ var element = document.createElement("input"); //Set attributes for the element. element.setAttr ...

Updating image content on the fly in a popover

Here is my unique HTML code: <div class="col-12 custom-file" data-toggle="popover-hover"> <input type="file" id="fileUpload" class="custom-file-input" accept=".jpg,.png,.jpeg"> < ...