Ways to adjust CSS for displaying slider text

Check out this example of multiple CSS caption animation: http://jsfiddle.net/2nnao6m6/1/

You can also view a single animation example here: http://jsfiddle.net/nu4paxft/

This is the HTML code snippet:

<div id="sample3" lang="is">

        <figure>
            <img src="olafsfjordur.png" width="200" height="200" alt="Ólafsfjörður" />
            <figcaption>Ólafsfjörður</figcaption>
        </figure>

    <!--end sample3--></div>

I need help in adjusting the multiple CSS animation so that the slider text aligns with the position of the single animation. Can anyone assist me with this?

htmlcss

Answer №1

Here is a very straightforward solution:

.mainHolder figure:hover figcaption {
    left: -70px;
    bottom: 40px;
}

Check out the demo here: http://jsfiddle.net/2nnao6m6/2/

If you want to adjust the positioning, simply change the values as needed.

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

The correct method for including a CSS file in a Vue.js application

How can external CSS files be properly added in a Vue.js Application? I have come across multiple methods for adding CSS files in a Vue.js Application. One suggestion is to use the following code: <link rel="stylesheet" type="text/css" href="/static/b ...

javascriptcssvue.js

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 ...

javascriptjqueryhtmlcss

Drupal 7 FlexSlider - alignment issue with image placement

I am encountering an issue with the Flexslider module on my Drupal 7 website. I have created a simple slider that displays 3 photos. I enabled touch screen functionality for the slider, and everything seems to be working fine except for one problem - all t ...

jquerycssdrupaldrupal-7flexslider

Ensure that dynamically generated fields are verified whenever one of them is modified

I am working on a program that generates text boxes and drop down lists dynamically. I need to find a way to validate these fields only when one of them is changed. The validation should occur if a date is entered in the text box, it should then check if t ...

htmlasp.netvalidationrequiredfieldvalidator

Sorting tables using jQuery and fixing CSS issues specifically for Internet Explorer 8

I'm currently working on making sure this page is compatible with IE 8. The jquery code that's being used allows for classes to be assigned based on odd and even elements, but it doesn't seem to function properly on IE 8. You can check out ...

jquerycsssortinginternet-explorercss-tables

Achieving perfect vertical alignment for both single and multi-worded links

Is there a way to vertically center single and multi-worded links in a horizontal navigation bar? Currently, the multi-worded links appear centered while the single worded links float to the left. I attempted to adjust the width of ul li a and ul li.colour ...

htmlcsstexthyperlinkcentering

Tips for organizing a div into a dock panel

I am seeking guidance on how to align and resize the following divs based on my specific requirements outlined below. Area A Area A should remain at the top with a set height that will not change. Area B The height of Area B should vary between 0 and a m ...

jqueryhtmlcss

Utilizing Loops to Generate Unique CSS Designs on an HTML Page

View reference image ->Take a look at the reference image provided. ->In the image, a for loop is used to create box designs and displayed above. ->The goal is to change the background color and border color of all boxes using a single HTML cla ...

javascripthtmlcssangular

SVG Opacity Transitions seem to ignore the constraints of CSS rules and bounce chaotically beyond their designated boundaries

I'm currently working on implementing a hover effect for an SVG rect embedded in HTML. The transition I've set up is not smooth, and the opacity values seem to be inconsistent during the animation. My browser of choice is Firefox. The rect I&apo ...

htmlcsssvgcss-transitions

Prevent CSS from affecting child tables

Here is my CSS and HTML setup: .comTable { width: 95%; cellpadding: 2px; margin: auto; border-collapse: collapse; } .comTable td { text-align: left; } .comTable td:first-child { text-align: right; wi ...

csscascade

Unable to Change Navbar Color

Presented here is the code snippet for the navbar located in app/assets/views/elements: <nav class="navbar navbar-default" role="navigation"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> ...

cssruby-on-railstwitter-bootstrap

Offspring of a parent with a "flex: 1" attribute and a grandparent with a "min-height" property defying the "width: 100%" rule

Is it possible to have a hidden footer just below the screen's bottom and allocate the remaining height to content children without inheriting max-height all the way down? The "Grand child" element is not occupying the full height: body { marg ...

htmlcss

The error message encountered is "Uncaught (in promise) Error: Unable to access attributes of an undefined object (reading 'launch')."

I am currently learning electron.js by developing a basic application that extracts information from a website. However, I am encountering a frustrating and annoying error. Here is the folder structure of my project The following code snippet represents ...

javascripthtmlnode.jselectron

Stop a looping animation keyframe in CSS and make it animate back to the beginning

I am facing an issue with a looping animation that rotates a square. Whenever I remove the class responsible for the animation, the square immediately returns to its initial position. My objective is to animate the square back to the starting position upo ...

csscss-animationskeyframe

Tab Buttons with Scroll Feature

I'm working on a tabpanel that dynamically generates an unknown number of tabs. To accommodate more tabs than the screen size can display, I've added navigation using the margin style instead of fixed widths. However, I'm struggling to move ...

jquerycsstwitter-bootstrap

developing a sleek visual transition using CSS animation

Have you seen the awesome animation on Discord's website? Check it out here! The way those coins move up and down so smoothly is really impressive. How can I recreate that effect for my own images? I decided to start with this code snippet img { ...

cssanimation

Ways to display notifications when the user is not actively browsing the website?

How can websites display notifications even when the user is not actively on the site? Take Facebook messenger, for instance. Even with the page closed, notifications still pop up. The same goes for Twitter, which also sends push notifications. I ...

javascripthtmlnode.jsangularweb

What could be the reason that the results of my quick sort function are not appearing on the screen

I'm having trouble getting any output from this code. Can someone help me figure out what's wrong? function Ascending() { var array = new Array(); array[0]=parseInt(document.getElementById("1").value); array[1]=parseInt(document.getElementById(" ...

javascripthtmlsortingquicksort

Navigate to the most recent clicked spot on the document

In the script provided, there is a grid layout where the goal is to navigate or scroll to the last selected position of the entry upon clicking the Scroll to last clicked position button after clearing the selection. Any recommendations are appreciated. ...

jqueryhtml

You are only able to click the button once per day

I am working on a button that contains numeric values and updates a total number displayed on the page when clicked. I would like this button to only be clickable once per day, so that users cannot click it multiple times within a 24 hour period. Below i ...

javascriptjquerycsshtml