When you hover over the image, a thin white line materializes along the bottom edge

Can anyone help me troubleshoot an issue I am facing with a white pixel line that appears at the bottom of every image within the "div class gallery" element? The white line seems to only show up when the mouse hovers over the images, especially since I have added a transform element for hover effects.

It's worth noting that these images are specifically included in classes "gallery" and "photo", and not any other class.

Below is the code snippet:

div.photo {
  height: 2rem;
  transition: transform .2s;
}

.photo:hover {
  transform: scale(0.9);
  cursor: pointer;
  box-shadow: 15px 15px 15px;
}

.gallery {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-gap: 2em;
}
<div class="gallery">
  <div class="photo"><img src="https://source.unsplash.com/300x200?v=1"></div>
  <div class="photo"><img src="https://source.unsplash.com/300x200?v=2"></div>
  <div class="photo"><img src="https://source.unsplash.com/300x200?v=3"></div>
</div>

htmlcsshovercss-transitionstransform

Answer №1

If you're experiencing an issue where there's a white space at the bottom of an image inside a <div> with borders, don't worry - this is a common occurrence due to how browsers handle inline-level elements like images. To fix this, simply change the display value of the image from inline to block by adding the style display: block; to the image.

Answer №2

Transform the .photo div by removing the box-shadow and applying it directly to the image:

 div.photo {
height: 2rem;
transition: transform .2s;
}
.photo:hover {
transform: scale(0.9);
cursor: pointer;
}
.photo:hover img{
  box-shadow:  15px 15px 15px;
}
.gallary {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-gap: 2em;
}
    <div class="gallary"> 
      <div class="photo"><img src="https://e0.365dm.com/20/12/768x432/skysports-messi-barcelona-la-liga_5220695.jpg?20201228082630"></div>
      <div class="photo"><img src="https://e0.365dm.com/20/12/768x432/skysports-messi-barcelona-la-liga_5220695.jpg?20201228082630"></div>
      <div class="photo"><img src="https://e0.365dm.com/20/12/768x432/skysports-messi-barcelona-la-liga_5220695.jpg?20201228082630"></div>
    </div>

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 transition property in CSS and JavaScript does not seem to be functioning properly in Firefox

Recently, I integrated a Slide in menu script on my website using a Slide in menu script. After following all the instructions provided, the menu started working flawlessly on Chrome and Safari browsers. However, my main goal was to make it function on Fir ...

javascripthtmlcss

creating tabulations and charts across various while loops

My goal is to create Tabs using information from the first while loop, and then populate a table within each Tab using data from the second while loop. The data is fetched date-wise from my 'treatment' table to generate the Tabs. The line items ...

phpmysqlhtml

Use jQuery to add an anchor tag before an image and then close the anchor tag

Here is the code snippet I am working with: <div id="slider"> <img src="images/p1.jpg" /> <img src="images/p2.jpg" /> <img src="images/p3.jpg" /> </div> I am looking to dynamically add <a> tags before ...

javascriptjqueryhtmlcssimage

"Position centrally on the inside, using flexbox to fill the entire

Seeking assistance with aligning the text in the center of the flexboxes so that the h4 and p elements in the large box are centered within their respective boxes, as well as ensuring the text in the two smaller boxes is also centered. Any help would be gr ...

htmlcssflexboxfullscreencenter

Live server feature in Visual Studio Code is not able to update CSS styles

Here's the problem: I'm encountering a CSS styling issue with the Live Server extension in Visual Studio Code (by ritwickdey). When I launch the live preview, none of my CSS styles are being applied. Although the HTML displays correctly, the CSS ...

cssvisual-studio-codeliveserver

Is there a method to generate an endless carousel effect?

Hello, I am trying to create an infinite carousel effect for my images. Currently, I have a method that involves restarting the image carousel when it reaches the end by using the code snippet progress = (progress <= 0) ? 100 : 0;. However, I don't ...

javascriptcssscrollcarouselinfinite

Button in HTML not responsive to clicks

I'm facing an issue with my HTML button as it's not clickable at all. I suspect it may be related to incorrect div settings or a background issue. Can someone advise on what setting needs to be changed for the "sign the petition" link to become ...

phphtmlbuttonclick

The output generated by BeautifulSoup is consistently " b' ' "

No matter which html file I select, all I keep getting as output is b' '. from bs4 import BeautifulSoup html_doc = "C:/Users/George/Desktop/bsTest" soup = BeautifulSoup(html_doc, 'html.parser') print(soup.prettify()) Is there anyone ...

pythonhtmlbeautifulsoup

Depending on the size of the screen, the layout of my HTML elements adjusts and

I'm struggling with positioning HTML elements on my websites. Despite knowing it's a simple issue, I find myself facing this problem with every website I create, as I am still new to web development. .artstation_b{ position: absolute; lef ...

htmlcss

Struggling to make a basic JavaScript prompt function as expected

<html> <title>UniqueTitle</title> <head> <link rel="stylesheet" type="text/css" href="style.css" > <script type="text/javascript"> function modifyDates() { var dates = pr ...

javascripthtmlprompt

Creating stylish horizontal navigation menus using HTML

Is anyone else experiencing issues with a HTML navigation menu on a website using the standard UL LI approach? Whenever I resize the browser window, the menu gets resized as well and the menu items that are outside the viewable area shift downwards. Has an ...

htmlcsscss-float

Clicking on links will open them in a separate tab, ensuring that only the new tab

Is there a way to open a new tab or popup window, and have it update the existing tab or window whenever the original source link is clicked again? The current behavior of continuously opening new tabs isn't what I was hoping for. ...

javascripthtmlusability

JavaScript Slide Show using setInterval()

Need some help with JavaScript! I have a slide and I want to add a button to either make it autoplay or stop it. When I just use an Alert inside the function, it works, but when I add the interval code, it won't. Check out my codepen link Here is the ...

javascripthtmlcssslidersetinterval

What is the functionality of Google Chrome's "New Tab" iframes?

Have you ever wondered about those 8 small iframes displaying your most visited websites? How do they capture snapshots of the websites? How are the websites chosen for display? And most importantly, how do they actually work? Edit: I want to learn how to ...

javascriptphpjqueryhtmlcss

What is the best way to locate an element in the HTML content that contains the class 'sponsored-post'?

This code snippet is flawed as it assigns 'none' to the variable article, even though the variable articles contains all the listing results. articles = soup.select('.listingResult') for article in articles: # <div class=&qu ...

pythonhtmlbeautifulsoup

Ways to specifically locate the initial list items

Need help creating an array of the first li elements but unsure of how to proceed. Here is the HTML structure: <div class="nav"> <ul> <li>Element 1</li> <li>Element 2 <ul> <li>Element ...

javascripthtmlcssdom

Execute a jQuery focus() function on a textarea element within a dynamically added form on the webpage

Whenever I dynamically insert a new form onto the page using clone(), my goal is to have the textarea within the form automatically focused. However, despite trying out the code below, it seems like it's not functioning as expected: .on('click&a ...

javascriptjqueryhtmlfocustextarea

Tips for controlling input elements with bootstrap

The sequence of the add more btn in jQuery input seems to be random, but I want it to be in a specific order. Current Output: https://i.sstatic.net/mGfPT.png Desired Output: https://i.sstatic.net/L5GTm.png ...

jqueryhtmlcssjquery-uibootstrap-4

Passing a string to a function in AngularJS through ng-click

How can I pass a string to a function using ng click? Here's an example: HTML <a class="btn"> ng-click="test(STRING_TO_PASS)"</a> Controller $scope.test = function(stringOne, stringTwo){ valueOne = test(STRING_TO_PASS); } Edit - ...

javascripthtmlangularjs

Utilizing Dojo widgets in Xpages

I'm having trouble applying CSS to certain dojo elements within my Xpage. Here is the CSS style sheet I am using: .formFields { color: rgb(5, 56, 107); font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-style: normal; font-variant: nor ...

cssxpagesxpages-extlib