What is the best way to add styling to my image when hovered over within a link on a responsive website?

I'm having trouble aligning the :hover state with the original footer image links.

Here is an edited version of the flicker issue I encountered on Chrome, while nothing appeared on Safari.

https://i.sstatic.net/ExdPW.png

I apologize for linking to the actual website, as I couldn't replicate the problem in a jsfiddle.

Website :

(NSFW)

Code :

<div class="row pp-thumbs">

                    <div class="pp-thumb column" data-xl-width="2" data-sm-width="4" data-xs-width="6">
                        <a href="http://couill.art/project/about-duplicate" title="About"><img src="http://couill.art/wp-content/uploads/2018/05/trio-trompettes-rouge-thumb-0-00-36-07.png" width="200" height="150"></a>
                        <p class="pp-title"><a data-font="font_dqju2lgtu" href="http://couill.art/project/about-duplicate" title="About">About</a><span data-font="font_dqju2lgtu">Animation</span></p>
                    </div>

                    ...

.project-panel .pp-thumb img {
    display: inline-block;
    width: 100%;
    height: auto;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.project-panel .pp-thumb img:hover {
    display: block;
    width: 100%;    
    height: auto;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 170px;
}
.project-panel .pp-thumb a[title="Danger Zone"]:hover>img {
  background: url(http://couill.art/wp-content/uploads/2018/05/Thicc-girls-slim-boi.gif) no-repeat;
    background-size: contain;
}

...

.project-panel .pp-thumb {
    margin: auto !important;
}

Appreciate your assistance.

Answer №1

<img> does not support a background attribute. The issue arises when hovering over the image, as the style change causes it to resize to zero width and height. This is because the anchor link surrounding it is an inline element rather than a block element. As a result, once you hover over the image, the styles revert back.

To achieve the desired outcome, a combination of techniques was used:

.project-panel .pp-thumb a {
    display: inline-block;
}
.project-panel .pp-thumb a:hover > img {
    visibility: hidden;
}

The background hover styles were then applied to the anchor element:

.project-panel .pp-thumb a[title="Danger Zone"]:hover {
  background: url(http://couill.art/wp-content/uploads/2018/05/Thicc-girls-slim-boi.gif) no-repeat;
    background-size: contain;
}
/* additional styles can be added here */

Visit this link for more details and examples

Answer №2

You can simplify things by using a basic inline JS example:

<a href="/project/danger-zone"><img title="About" src="/wp-content/uploads/2018/05/trio-trompettes-rouge-thumb-0-00-36-07.png" onmouseover="this.src='/wp-content/uploads/2018/05/trio-trompettes-rouge-thumb.gif'" onmouseout="this.src='/wp-content/uploads/2018/05/trio-trompettes-rouge-thumb-0-00-36-07.png'" /></a>

Additionally, I've opted for relative links over absolute links for a potentially more effective method.

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

Preventing access to websites through a web application using JavaScript

I am in the process of creating a web application that enables users to create a list of websites they wish to block, preventing access from their browsers. My goal is to block websites on all browsers, but I have narrowed my focus to Chrome for now. I ha ...

Wordpress dynamic content enhanced with Bootstrap carousel

My current issue involves a Bootstrap carousel that I've implemented in WordPress. While the carousel itself is functioning properly, I'm having trouble getting it to link to specific articles when the images are clicked on. Can anyone offer advi ...

Mastering the art of creating data tables

Currently, I am working on a table that involves phone numbers, subscription status, and groups. However, I have encountered an issue where the incoming date is not aligning properly in my table. It seems to be a simple HTML problem, but I am struggling to ...

Struggling to position search form to the right side of an <li> element

I'm having trouble aligning my search bar to the right side of the navigation menu items. HTML: <body> <div id="navbox"> <nav id="nav"> <ul id="nav"> <li><a href="#">Home< ...

Design that adapts to various screen sizes and devices

I'm facing an issue where the two elements are misaligned on mobile, even though they display perfectly on desktop. In some cases, the bottom element is partially hidden on the left side as shown here: Any suggestions on how to center these elements ...

The integration of PHP code with an HTML form is causing issues

When I use the insert_teacher('bla bla','bla bla','dqsd') function in a PHP file, everything works fine. However, when I try to implement it with an HTML form, nothing is displayed and no data is inserted into my database. &l ...

Is there a lack of a feature for automatically shifting to the next input element in dynamically-created HTML?

I have a JavaScript function that is triggered when a user clicks a button: htmlstring = ''+ '<div class="input_holder">'+ '<div class="as_input_holder"><input tabindex="1" class="as_input form-control-sm ...

Can a div be relocated within another div based on a random roll of the dice?

Hey there, I'm currently working on creating a simple Monopoly-style game. As someone who is pretty new to JavaScript, I'm looking to figure out how to move the game piece around the board based on dice rolls. Any guidance or assistance would be ...

Using the array `$_POST` by combining multiple pieces of data into a

Is it possible to receive arrays in $_POST without multiple hidden input fields and without using ajax to submit the form? Typically, I would set up the HTML like this: <input type="hidden" name="array[]" /> <input type="hidden" name="array[]" / ...

Can I combine the col and d-flex classes in Bootstrap 5 without breaking any rules?

Is it possible to use both col and d-flex classes together? I want to center the element with the class "description" by combining them. <section class="container-fluid mb-5"> <div class="row"> <div class=&q ...

What are some effective ways to ensure the footer stays at the bottom of the page

I managed to successfully position the footer at the bottom of the page, but I noticed that when I resize the screen to fit a phone, especially when there is scrolling on the page, the footer moves up! <footer className="footerContainer"> &l ...

Place information from an input field into a specific row within a table

Utilizing Angular 4, I am developing a frontend application for a specific project. The interface features a table with three rows that need to be filled with data from an external source. https://i.stack.imgur.com/Dg576.png Upon clicking the "aggiungi p ...

Switch picture when hovering over button image

Looking for a solution where I have 2 images - one inactive and the other active. I want the inactive part of the image to change to active when someone hovers over it. Here are the pictures: I was able to achieve this using mapster, but it's not res ...

How can we consolidate an excess of menu items into a condensed, collapsed menu?

I have a navigation bar displaying category items, but if the menu items exceed the navbar width, how can I condense them into a drop-down menu using Bootstrap 3.0? Currently, my navbar only shows 10 items due to limited space. However, I have more items ...

A guide on how to implement the closing functionality of a CSS menu when clicking outside the menu using

I have a drop-down navigation menu implemented on a website using CSS. The sub-menus appear when hovering over specific items. While this functionality works well on desktop, I am encountering an issue on touchscreens. When clicking outside the menu area, ...

The jsPdf library performs well on medium-sized screens like laptops, but when downloaded from larger monitor screens, the PDF files do not appear properly aligned

In the code snippet below, I am using html2canvas to convert HTML to PDF. The PDF download works fine on medium screens, but when viewed on larger screens, some pages appear blank and the content order gets shuffled. How can I resolve this issue so that th ...

Why do elements align horizontally in a div even when I specify it to display as a block?

My understanding is that display: block is the default setting. However, even after specifically setting display: block, my div was still aligning items horizontally. The only solution I found was to use: display: flex; flex-direction: column; Any insight ...

Showing small previews of images using php

I'm struggling with getting linked images to display. The code I have is currently located in a .php file. Its purpose is to retrieve all images from the directory where the file resides and show them using a "for" loop. However, at the moment, it onl ...

Properly nested anchor elements with semantic meaning

I'm currently working on a web application where we are implementing inline editing. To illustrate the issue I'm trying to address, let's use the example of a Facebook post. For instance: Jennifer Lopez shared a new video The name "Jennif ...

Is there a way to make a div element clickable?

I have attempted to include a link (href) in the cart-button class using the following HTML code: <div class="cart-button" href="#shopping-cart" alt="view-shopping-cart"><span>Shopping Cart (0)</span> <div class="cart-dropdo ...