The hover effect is implemented across all image elements

Below is the code snippet in question:

#mg1 {
  margin-left: 3%;
}
#mg1:hover {
  margin-top: 4%;
}
<div id="section1">
  <center>
    <div id="bgp">
      <center>
        <p>THUMBNAILS</p>
      </center>
    </div>
  </center>
  <br>

  <img src="321321321321.png" width="200" height="150" id="mg1">
  <img src="ewqfh.png" width="200" height="150" id="mg2">
  <img src="2321321.png" width="200" height="150" id="mg3">

</div>

Despite intending for the hover effect to only apply to the image with the id "mg1", it seems to be affecting all images. What could be causing this unexpected behavior?

htmlcss

Answer №1

#mg1{
margin-left:3%;
position:relative;
}

#mg1:hover{
 
margin-top:4%;
}
   
img{

  float:left;
  
}
<div id="section1">
       <center><div id="bgp"><center><p>THUMBNAILS</p></center></div></center><br>

        <img src="321321321321.png" width="200" height="150" id="mg1">

        <img src="ewqfh.png" width="200" height="150" id="mg2">
        <img src="2321321.png" width="200" height="150" id="mg3">

    </div>

Answer №2

#section1{
position:relative;
}
#mg1,#mg2,#mg3{
position:absolute;
}
#mg1{
margin-left:3%;
}
#mg2{
top:200px;
  
}
#mg3{
left:200px;
  
}

#mg1:hover{
  margin-top:15%;
  transition:2s linear;
}
<div id="section1">
       <center><div id="bgp"><center><p>THUMBNAILS</p></center></div></center><br>
<div id="mg1">
        <img src="http://www.freeiconspng.com/uploads/green-humming-bird-png-4.png" width="200" height="150" ></div>
       <div id="mg2"> <img src="http://www.freeiconspng.com/uploads/guitar-icon-png-18.jpg" width="200" height="150" ></div>
     <div id="mg3">   <img src="http://www.imagenspng.com.br/wp-content/uploads/2015/02/super-mario-03.png" width="200" height="150" ></div>
  </div>

Answer №3

Implement position:relative and z-index:1 for element #mg1. Use top and left properties instead of relying on margins, and switch to using vh and vw units if the parent element is too small.

SNIPPET

#section1 {
  height: 600px;
  width: 800px;
}
#mg1:hover {
  position: relative;
  top: 4vh;
  left: 3vw;
  z-index: 1;
}
<div id="section1">
  <center>
    <div id="bgp">
      <center>
        <p>THUMBNAILS</p>
      </center>
    </div>
  </center>
  <br>

  <img src="http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png" width="200" height="150" id="mg1">
  <img src="http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png" width="200" height="150" id="mg2">
  <img src="http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png" width="200" height="150" id="mg3">

</div>

Answer №4

<!DOCTYPE html>
<html>
<head>
<style>
#mg1 {
  margin-left: 3%;
}
#mg1:hover {
  margin-top: 4%;    
}

img{
position: relative;
float : left;
}
}
</style>
</head>
<body>
<div id="section1">
  <center>
    <div id="bgp">
      <center>
        <p>THUMBNAILS</p>
      </center>
    </div>
  </center>
  <br>

  <img src="321321321321.png" width="200" height="150" id="mg1">
  <img src="ewqfh.png" width="200" height="150" id="mg2">
  <img src="2321321.png" width="200" height="150" id="mg3">

</div>

</body>
</html>

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

Various results can be produced based on the .load() and .resize() or .scroll() functions despite using the same calculation methods

I'm currently working on developing my own custom lightbox script, but I've hit a roadblock. For centering the wrapper div, I've utilized position: absolute and specified top / left positions by performing calculations... top: _center_ver ...

javascriptjquerycsslightboxcss-position

Launching a HTML hyperlink inside a div with the power of jQuery

I am currently exploring the functionality of dragging and dropping an HTML link into a div element. My objective is to have the link open within that specific div element. The layout consists of two divisions named "left-panel" and "canvas". The concept ...

jqueryhtmlajaxjquery-ui

Aligning floating elements in the center

Presently, I am working with the following code... <!DOCTYPE html> <html> <head> <title>Test</title> <meta charset="UTF-8" /> <link href="verna.css" type="text/css" rel="stylesheet" /> </head> ...

csshtmlcss-float

How to Blend Pseudo-classes in CSS?

If I want the selected text in a link to turn red when hovered over, can I achieve that using the following CSS code? .abc:hover::selection {color: red;} Also, if I have the following link: <a href="123" class="abc">4567890</a ...

csscss-selectorspseudo-class

If the div element contains an <li> element, jQuery animate() will not function properly

Initially, my div was animating perfectly. However, when I inserted a list inside the divs, the animation only became visible once it reached the bottom of the height of the lists. To trigger the animation, click on the Products option in the top menu. T ...

jqueryhtmlcssjquery-animatehtml-lists

I am having issues with my search form - it doesn't appear to be

I am trying to create a search form that will display users (username, firstname, or lastname) from my database as the user types, similar to how Facebook and Twitter do it. However, when I click on the search button, nothing happens. Below are two parts o ...

phphtml

Tips for controlling HTML elements using JavaScript

I'm currently working on implementing a mouse-over scale effect for an HTML image. I chose to use JavaScript for this task because I need the ability to manipulate multiple elements in different ways simply by hovering over one element. Below is the J ...

javascripthtmlcsswebkit

Tips for determining the width of an image and utilizing that measurement as the height in order to create a balanced square image

I am currently facing an issue with my code that is used to retrieve the width of an image which is set in percentages. Although I am able to obtain the width in pixels, I am struggling with correctly inserting the variable into the CSS property value usin ...

javascriptjqueryhtmlcssvariables

Is it necessary to utilize container or container-fluid within the grid system layout?

While similar questions may already exist on Stackoverflow, I believe the exact answer has yet to be found. Many suggest: "You should nest .col within .row, and ensure that .row is inside of .container." However, this concept still eludes me. I underst ...

javascripthtmlbootstrap-4

PHP/HTML failing to upload extra large files

Allowing users to upload large files is causing an issue for me. I tested uploading a 22 MB file and it was successful. However, when I tried uploading a 200 MB file, it seems that the file does not enter the if block and instead returns the output from th ...

phpjqueryajaxhtml

Seeking assistance with creating a form that is centered on the page

As a newcomer here, I am in the process of learning new things. My current challenge is to create a center form. Here is what I have experimented with so far: <!doctype html> <html lang="en> <head> <meta charset="utf-8"> &l ...

htmlcssbootstrap-5

Personalizing bootstrap tabs

I'm currently working on a project that requires implementing custom-style tabs. I'm facing challenges in customizing the borders of the tabs, particularly rounding the red bottom border and adding space between the right border and bottom border ...

htmlcssbootstrap-5

Issue with data type not refreshing in mySQL Workbench

I'm facing an issue with changing the datatype of my "first_name" column. I want it to be VARCHAR(45), but it's stuck at INT(11) as shown in the table diagram and connection provided below. I've attempted to forward engineer the diagram mul ...

phphtmlmysqlmysql-workbenchalter-table

Change hyperlink text color on Android CheckBox

I am having a CheckBox with two links embedded in the text. The text is set using the following code: String htmlText = "Accept <a href='someUrl'>Terms and Conditions</a> and <a href='anotherUrl'>Privacy Policy&l ...

javaandroidhtmlcssxml

Guide to positioning a top navigation menu with dropdown items in the center using CSS: absolute positioning

I have implemented a pure CSS menu from this source on my website. It functions properly in the 'hamburger menu' mode, but I am encountering difficulties when attempting to center or right-align the menu in other modes. Despite trying various so ...

htmlcssdrop-down-menucss-position

Background image not visible on Firefox and Chrome when using a DIV element

I'm encountering an odd issue where my DIV background isn't showing up in Firefox and Chrome, but it looks fine in IE. I've searched on several places like Stackoverflow for solutions to this problem, but none of them have worked for me so f ...

csshtmlbackground-image

Python does not render the HTML string from a variable when using Mako

Trying to render a string variable in a Mako template like: ${variable_name} The variable contains HTML content, but it is not displayed correctly. Instead of rendering the HTML, it just shows the source code like: <div>...<p>..</p>...&l ...

pythonhtmlxmlodoomako

"Even rows are the only ones being highlighted on the table

I created a table that dynamically highlights all odd rows. To achieve this, I implemented a method to identify the row number and then apply the alt class to those specific rows. In order to highlight the rows on hover, I added a simple :hover selector ...

htmlcsshover

What is the best way to increase the size of the left margin?

The h1 text needs to be positioned more towards the middle of the screen, but I'm having trouble with the left margin. Adjusting the margin size in pixels and percentages doesn't seem to have any effect on the page. Changing the background color ...

htmlcssmargin

Utilizing .html() to convert JSON data into HTML content

I have thoroughly commented the code below in my attempt to retrieve JSON data and pass it to the 'results' div in my HTML view. However, this process seems to return nothing, making it challenging to debug since no output can be displayed on the ...

javascripthtmljson