Image not showing correctly after closing the bootstrap modal

I am currently working on creating a gallery with hover effects for each image, similar to the one found here. My goal is to have a Bootstrap modal open when I click on a link within the hovered image, displaying additional content.

Everything seems to be functioning correctly up to this point. However, after closing the modal, the image does not display properly on the main page. To see the issue, please visit:

http://www.bootply.com/90dGFlCrxI

If anyone could provide insight into what I might be doing wrong, I would greatly appreciate it. Thank you!

csstwitter-bootstrap-3css-transitionsbootstrap-modal

Answer №1

It appears that the issue lies in the

overflow: hidden;

declaration within this particular CSS rule:

          .effect figure {
               margin: 0;
               position: relative;
               /*overflow: hidden;*/
               text-align: left;
           }

Once you remove this declaration, the issue should be resolved.

Alternatively, you can try the following workaround:

    .effect figcaption {
        position: absolute;
        width: 100%;
        left: 0;
        padding: 7px;
        background: #26BC8A;
        color: #ed4e6e;
        height: 50px;
        top: auto;
        bottom: 0;
        opacity: 0;
       /* transform: translateY(100%); */
       /* transition: transform 0.4s, opacity 0.1s 0.3s; */
}

It seems that the translateY property is not functioning as anticipated.

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

Issues with jQuery horizontal sliding gallery functionality

My attempt at creating a jQuery sliding video gallery is not working as I hoped. Instead of scrolling through the images when clicking arrow buttons, the entire div moves left or right depending on the direction. HTML: <div id="videocontainer"> & ...

jqueryhtmlcss

IE6 disrupts stored layouts

I've encountered a strange issue with my design in IE6. It loads perfectly at first, but after reloading it a couple of times, everything suddenly collapses. The strange part is that when I upload an updated version, it fixes the issue, only to break ...

htmlcsslayoutinternet-explorer-6

Styling the body element in Material UI: A guide to customizing the

I'm having trouble figuring out how to target the root elements using the ThemeProvider in Material UI. const theme = createMuiTheme({ palette: { background: { default: "#00000", backgroundColor : 'black', b ...

cssreactjsmaterial-uithemes

The overlay only covers a portion of the page

I'm currently working on a new webpage and have found the perfect background image. However, I would like to add an overlay to darken the image. Unfortunately, the overlay doesn't cover the entire page! Despite my attempts, I haven't been s ...

htmlcss

Issues with CSS causing items to not line up in a single row

I'm currently working on an html/css page and trying to align the items of the agenda class in the same row, centered on the page. https://i.sstatic.net/8TjG8.png Here's the code I've been using: <html lang="en" xmlns="ht ...

htmlcss

"Items within mui Grid do not properly align within the Grid container

I'm struggling to fit two large Grid items inside a Grid container. The Grid container needs to be 100% of the screen's height (or parent container) Grid items are large and need to fill the container while remaining scrollable Image #1 shows t ...

cssreactjsmaterial-uiflexbox

Accelerate Image Preloading速

I am currently in the process of creating a website that features divs with background images. Although I am new to JavaScript, I am eager to learn more about it. My main goal is to preload these images so that visitors do not encounter any delays or bla ...

javascriptjqueryhtmlcss

Creating an SVG element that adjusts to the size of its parent container: tips and tricks

I'm attempting to achieve the following: Displaying an SVG square (with a 1:1 aspect ratio) inside a div element. When the width of the div is greater than its height, the square should adjust to fit within the container based on the height (red box ...

csssvg

The Dojo claro css method utilizes absolute positioning for styling ContentPane elements

I am currently utilizing dojo 1.8 and facing an issue with unwanted padding in my bordercontainer/contentpane layout. The problem arises when I incorporate the claro css file, as it seems to apply styles directly inline to the div elements used for my cont ...

cssdojo

Trouble with CSS animation when incorporating JavaScript variables from a PHP array

Whenever I use a script to fetch an array of objects from PHP... I successfully display the results on my website by outputting them into Divs. The challenge arises when I introduce CSS animations. The animation only triggers if the variable length excee ...

javascriptphpcssjsonanimation

What steps can be taken to ensure that the header elements such as the image, text, and button are

I am currently working on a website project using Bootstrap 5. For the header section of the site, I have incorporated a carousel from Bootstrap that includes images, text, and buttons. My main objective is to ensure that all elements within the carousel ...

htmlcssresponsive-designfrontendbootstrap-5

What is the best way to create a gradual color change in each individual cell instead of changing all at once?

Looking for some help with a grid I'm working on. I've got the cells changing colors like I want them to, but they're all changing at once. What I really need is for them to light up in a specific order - Yellow, Green, Blue, White, Orange. ...

javascripthtmlcss

You are unable to align a paragraph with a specific width in the center

I adjusted the width of a paragraph to make it less stretched out horizontally and more compact. However, when I attempted to center align the text within the paragraph using text-align: center;, only the direction of the paragraph was centered. The chall ...

htmlcss

Issue with importing styles within a media query

I am having trouble importing a style that is based on a media query. When I try to import the styles, it doesn't seem to work. However, if I directly include the styles within the media query itself, they show up on the page. For reference, you can ...

csswordpressimportmedia-queries

Exploring the challenges of applying styles to buttons using the :first-child and :last-child selectors, especially when

I successfully applied rounded corners to the first and last elements of a styled button using CSS. Here is how it looks: https://i.sstatic.net/A62Kl.png The issue arises when I dynamically insert new buttons using Angular's ng-if. The new buttons ...

cssangularjs

Is there a way to adjust the width of my web layout without sacrificing its responsiveness?

Struggling with my website layout design as I encountered an issue. The overall width of the layout is too excessive, and I want to introduce some margins on the sides for a better visual appeal. Although the responsive design works well originally, adding ...

htmlcssresponsive-designbootstrap-5

Creating an XPath expression for selecting multiple siblings of a div tag

Currently, I am working on writing an XPath expression for a specific section of code: <div class="line info"> <div class="unit labelInfo TextMdB">First</div> <div class="unit lastUnit"> <div clas ...

htmlcssseleniumxpath

CSS selector that targets elements within a specified parent element

Imagine a scenario where there are numerous divs in an HTML document, like the three examples provided below: <div id="1"> <p>hi</p><p>Peter</p> </div> <div id="2"> <p> hola</p><p>Peter&l ...

csscss-selectors

Boxes maintain their height consistency even after a page refresh

I Implemented This Script to Ensure Same Height for Boxes <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.2.min.js"> $(document).ready(function(){ var highestBox = 0; $('.box').each(function(){ ...

jquerycssheightrefreshbox

Revamping the User Experience for Amazon Fire TV App

I've been working on creating a 3D application for the Amazon Fire TV using HTML5. I successfully developed and loaded it onto my Fire TV stick using the web app tester tool. Below is snippet of my code: #right{ width: 50%; display: inline-bl ...

javascriptcsshtmlamazon-fire-tv