Gallery with blinking hover effect

I'm struggling with a blinking hover effect in my gallery made with HTML and CSS. I've been searching for a solution but can't seem to fix it. Can anyone offer some help?

Check out the code on jsfiddle.com

HTML:
 <div id="gallery">
            <div class="col-sm-6 photo-1">
                <div class="transparent-gallery">
                    <h3>Photo Caption</h3>
                    <p>Donec sodales semper porttitor.</p>
                </div>
            </div>
</div>

CSS: 
            #gallery .photo-1{
            background-image:url(http://img2.wikia.nocookie.net/__cb20130326013809/camp-dublin-roleplay/images/e/ec/Camden-town.jpg);
            background-size: cover;
            height:300px;
        }

        .transparent-gallery{
            background: rgba(36, 43, 46, 0.8);
            background-size: cover;
            height:300px;
            width:100%;
            position:absolute;
            text-align: center;
        }

        .transparent-gallery h3, .transparent-gallery p{
            visibility:hidden;
        }

        .transparent-gallery:hover h3, .transparent-gallery:hover p{
            visibility:inherit;
        }

        .transparent-gallery:hover{
            background: rgba(36, 43, 46, 0.95);
            height:110px;
            top:200px;
        }

I'm new to coding so I know there is room for improvement in this code...

htmlcsshoverfrontend

Answer №1

It is recommended to set these attributes in the following manner

#gallery:hover .transparent-gallery h3, #gallery:hover .transparent-gallery p{
    visibility:inherit;
}

#gallery:hover .transparent-gallery{
    background: rgba(36, 43, 46, 0.95);
    height:110px;
    top:200px;
}

View example here

This method signifies instructing the code as follows:

When #gallery:hover Show this => .transparent-gallery

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

How to automatically select the first item in a populated dropdown list using Vue JS

My HTML select element is populated with options from a server, but when using v-model, it initially selects an empty option instead of the first one. I came across a solution on a post which suggests selecting the first option manually, but since the dat ...

javascripthtmlvue.jsvuejs2

The header and footer are not extending across the entire width of the page

While testing on a responsive screen, I noticed that the header and footer both decrease in width instead of maintaining 100% width as intended. The issue only occurs when I reduce the width of the screen. body{ margin: 0; padding: 0; box-si ...

htmlcssheaderfooter

Understanding how to automatically adjust margins in Bootstrap based on screen width

When viewing in fullscreen, the margins are set to ensure the container fits entirely within the page. However, without the 200px margin in the .gallery class, the container would be too big to fit on the page without scrolling. The problem arises when th ...

htmlcsstwitter-bootstrapflexboxbootstrap-5

Steps to retrieve all tags from HTML content and display them in a text box

Within a textarea with the id of "textArea1", I have embedded webpage HTML source code. This particular HTML code includes various instances of "p" tags. My objective is to compile a list of all the p tags that are inside the mentioned textarea. ...

javascriptjqueryhtmlasp.net

Bootstrap file input fields failing to update after file selection

Currently, I am utilizing Bootstrap v4.5.0 within a Django template for my project. Within this setup, I have implemented Bootstrap form components to showcase various form elements (https://getbootstrap.com/docs/4.5/components/forms/). The issue at hand ...

htmltwitter-bootstrapbootstrap-4

steps for making personalized video embed dimensions in bootstrap

Update: I have successfully integrated a non-standard bootstrap video size with proportions of 4x5. However, unlike standard bootstrap embeds, it doesn't seem to adhere to a maximum height no matter where I place it - on the iframe or div elements ar ...

cssbootstrap-4

Disregard IDs when linting CSS in ATOM

Is there a way to configure csslint in Atom to exclude "ids" and prevent the warning "Don't use IDs in selectors" from appearing? Update: Despite my question being flagged as potentially duplicate, I delved deeper in my own research and ultimately fo ...

csshtmlatom-editorcsslint

"Recently, I included a function called 'test' in the code, but I encountered an error stating that it was not recognized as a function. Can someone provide assistance

Issue Detected A 'TypeError' has been thrown: ".goal_test".click is not defined as a function Feel free to collaborate on the code by clicking this link: Please note that my modified code is enclosed within asterisk symbols. ...

javascripthtmlcss

What is the method to programmatically trigger the highlight effect (similar to mouseover) in Javascript or JQuery?

In the process of creating an interface that features a list of large buttons, I am interested in implementing functionality to highlight a button based on the movement of the mouse. Essentially, I would like the button below the currently highlighted butt ...

javascriptjqueryhtml

Safari does not display disabled input fields correctly

I have designed a simple angular-material form with various inputs that are organized using angular flex-layout. The form displays correctly in all browsers except for Safari on iOS devices. The problem in Safari arises when loading a form that contains d ...

htmlcssangularangular-materialangular-flex-layout

Transitioning to mui5's sx prop instead of makeStyles is generating a typescript error - none of the overloads match this call when passing an object with

I encountered an issue while converting a component to mui 5. Here is the original code snippet: const useStyles = makeStyles({ imageContainer: { display: "flex", width: "65%", float: "left", marginRight ...

cssreactjstypescriptmaterial-ui

I have been working on creating a hangman game, and although I have figured out the logic behind it, I am experiencing an issue where it is not functioning properly. After inspect

I am currently working on a basic hangman game using only HTML and JavaScript. I have the logic in place, but it doesn't seem to be functioning correctly. When I inspected the element, it showed an error saying 'undefined toUppercase.' As a ...

javascripthtmlarrays

What steps should be taken in PHP to display a popup when the user input is found to be invalid?

I've been working on implementing a popup in PHP to show if the user enters an existing username, as per our teacher's requirement to use popUp instead of alert. I have set the visibility property of the popup to "Hidden" in CSS; <div class=&q ...

javascriptphphtml

Toggle the visibility of all elements using jQuery by creating multiple buttons for each action

I have a group of 4 buttons that control the visibility of images on the page. Each button toggles between showing and hiding all images when clicked. When a button is clicked, it changes its text from "HIDE ALL" to "DISPLAY ALL." The issue I'm facin ...

javascripthtmljquerybutton

How can CSS be used to change the text color of input placeholder in Edge Browser?

While using Edge Browser, I encountered an issue where I was unable to change the input placeholder color. The :-ms-input-placeholder selector was not working on Edge, although it functioned properly on IE 10 and IE 11. input:-ms-input-placeholder { ...

htmlcssplaceholdermicrosoft-edge

Visual Composer now appends "?id=" to the background images of columns and rows, enhancing the customization

I am in the process of improving the performance of a WordPress site that is using the Visual Composer plugin. When checking GTmetrix results, I came across this issue: Ensure resources are served from a consistent URL https://example.com/wp-content/uploa ...

phpcsswordpresspagespeedvisual-composer

Obtaining connection data in jsPlumb can be accomplished through a variety of

I have created a compact table of nodes that allow me to drag and drop connections or manually input node IDs to establish connections between them. Despite searching through the documentation and scouring the internet for examples, I am struggling to fin ...

javascriptjqueryhtmljsplumb

How to eliminate the gap below a CSS element by adjusting the top value

https://i.stack.imgur.com/Sn6Wx.png The three 'Replacement Options' sections are contained within a div with the class relative. The relevant CSS properties have been applied as shown below: .relative { top: -10rem; position: relative; ...

htmlcss

Having trouble retrieving the ID of a button?

I'm attempting to retrieve the ID of a button, but I seem to be getting the ID of the surrounding div instead. This is not the desired outcome. Here's my current approach: HTML <div class="container container-about container-login"> ...

javascriptjqueryhtml

How can the table header be displayed only once within the map function in React JS?

I am currently working on displaying tabular data in the UI using React and TailwindCSS. The issue I am facing is that when I use a map function to iterate over the data, the header is being displayed after each row in the table. How can I ensure that the ...

reactjsnext.jshtml-tablefrontendtailwind-css