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

Creating a personalized, perfectly centered container with a specific width in Twitter Bootstrap

I've been struggling with a unique challenge for the past day without success. I can't seem to figure out where I am making a mistake. My goal is to design a fixed container layout using Bootstrap, which is precisely 33em wide and horizontally c ...

csstwitter-bootstraplessmargin

Using Javascript to extract formatted text from a webpage and save it to the clipboard

I've developed a straightforward tool for employees to customize their company email signature. The tool generates text with specific styling, including bold fonts and a touch of color - nothing too extravagant. When I manually copy and paste the styl ...

javascripthtmlmootools

Organize your table with CSS styling

Looking for a way to rearrange a table with 2 columns after every 2 rows so that the lines continue on the right side? Check out the example below: [1][2] [1][2][5][6] [3][4] => [3][4][7][8] [5][6] [7][8] Wondering if this can be achieved using o ...

csshtml

Check out the HTML display instead of relying on console.log

Need help displaying the result of a JavaScript statement in an HTML page instead of console.log output. I am new to coding! Here is the JS code snippet: $.ajax({ url: 'xml/articles.json', dataType: 'json', type: ...

javascriptjqueryhtmljsonrss

Achieve uniform display across browsers: Implement Chrome's overflow ellipsis feature on Firefox

I am seeking a CSS solution to achieve the same "overflow: hidden" and "text-overflow: ellipsis" behavior in Firefox as I get in Chrome. In Chrome, when the width of the tag is reduced, the text gets hidden and replaced with an ellipsis. However, in Firefo ...

htmlcssgoogle-chromefirefoxcross-browser

Issues with implementing CSS Icon Generated Content on a live Azure Web Role

My dilemma lies with my MVC4 web application that I'm attempting to deploy as an Azure web role. The site incorporates Metro UI CSS. While the deployed web role is functioning properly overall, I am encountering an issue with the CSS-generated conten ...

c#cssasp.net-mvc-4azureazure-web-roles

Loop through items in a list using Angular.js and display each item within an <

I am facing an issue where the model returned from the server contains html tags instead of plain text, such as b tag or i tag. When I use ng-repeat to create a list based on this model, the html is displayed as pure text. Is there a filter or directive av ...

javascripthtmlangularjs

CSS grid is organizing itself neatly on larger screens

I'm currently facing an issue with displaying a CSS grid on my page. When viewed on desktop, the grid appears stacked up instead of in separate columns. I've tried various methods like dividing it into 4 columns and using spans for width but noth ...

phpcssgridcss-grid

Discover the method for creating URLs that are relative to the specific domain or server on which they are hosted

I need to adapt my menu bar to cater for different server environments: <a href="http://staging.subdomain.site.co.uk/search/page">Menu</a> The main source site is hosted on an external subdomain from an API service, and I want the URLs in my ...

javascripthtmlurlhyperlink

Authenticate through Twitter when using PhoneGap Cordova

Looking to implement Twitter login in my application using JavaScript and HTML. How can I redirect users to the Twitter login page when they click on the "Sign In with Twitter" button? ...

javascriptandroidhtmlcordova

Tips for returning an element to its starting position following animation

Hey there, I’m fairly new to the world of HTML and CSS. Recently, I was working on creating a YouTube clone website and I’ve run into an issue with the navigation. On the official YouTube website, when you click on the hamburger menu icon, the naviga ...

javascripthtmljquerycssposition

What is the best way to adjust the fontSize of text within a table using Material UI?

In my Material UI table, I am attempting to adjust the fontSize of the contents. However, when I try to modify it using the style={{}} component, the changes are not being applied. <Grid><Typography variant="body1">Fiscal Year </Typography&g ...

cssreactjsmaterial-uiformsy-material-ui

Conceal the page's content as it moves beneath a stationary div

My issue involves a fixed div position with a margin from the top of the page. When I scroll my page, the content of my relatively positioned div (containing page content) is visible under the fixed div due to the margin from the top of the page. Despite s ...

htmlcss

access denied on image links

While developing a web app with Angular5, I encountered an issue regarding retrieving image URLs from the 4chan API. Each post in my database contains an image URL, however, when I try to access it through my app, I receive a 403 forbidden error in the con ...

htmlangularimageurlhttp-status-code-403

Adjust the margin of FormHelperText within a FormControl specifically for a Select component in Material-UI

I'm currently facing a challenge where I need to add marginLeft of 8px to FormHelperText. However, I have not been successful in doing so within the MuiInput formControl rule or in MuiSelect. Here is the React code snippet: <FormControl error clas ...

cssreactjsformsmaterial-uijss

Measuring dimensions with HTML on the server - how to do it?

I am facing a challenge with my web application that allows users to upload entire .html files to the server. I am looking for a way to automatically detect and store the width/height of the uploaded html in my database. Currently, I have been experimenti ...

html.netwebbrowser-control

Grouping and retrieving values from an array of JavaScript objects

I am looking to implement a groupBy function on the object array below based on the deptId. I want to then render this data on a web page using AngularJS as shown: Sample Object Array: var arr = [ {deptId: '12345', deptName: 'Marketin ...

javascriptangularjshtmllodash

Displaying nested arrays correctly

My latest endeavour involves constructing a data tree in Vue, utilizing components. Let's examine the provided data snippet: "data": [ { "id": 1, "name": "foo", "children": [ { "id": 2, "name": "bar", "children": [] } ...

javascripthtmlvue.jsvuejs2

Is there a way to verify the identity of two fields using an external script such as "signup.js"?

My current project involves working with Electron, and it consists of three essential files. The first file is index.html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="styles ...

javascripthtmlcsselectron

The vertical-align property in CSS fails to function properly when applied to specific rows or columns within the

Hello, I have been experimenting with table attributes and came across the valign attribute. However, I encountered some cells that were not affected by it. So, I decided to try CSS vertical-align instead. To my surprise, some cells were affected while oth ...

htmlcss