I have several images that are in a line that will resize on hover so that the user knows that the image is being selected. The problem is that when you move from one image to the next, all the rest of the images move downwards. Additionally, when moving quickly from one image to the next, the screen appears to shake. How can I fix this?
img{
margin:10px;
}
img:hover{
width:100px;
height:100px;
}
<img src="https://www.thegamecrafter.com/printable-icon/SmallSquareMat.png" width="70" height="70" />
<img src="https://www.thegamecrafter.com/printable-icon/SmallSquareMat.png" width="70" height="70" />
<img src="https://www.thegamecrafter.com/printable-icon/SmallSquareMat.png" width="70" height="70" />
<img src="https://www.thegamecrafter.com/printable-icon/SmallSquareMat.png" width="70" height="70" />
<img src="https://www.thegamecrafter.com/printable-icon/SmallSquareMat.png" width="70" height="70" />
http://jsfiddle.net/sgqsn618/
To fix this, add vertical-align: top to your images. Also, to prevent the screen from looking so shaky, add a transition to your images.
img{
margin:10px;
vertical-align: top;
transition: all 200ms ease;
}
img:hover{
width:100px;
height:100px;
}
<img src="https://www.thegamecrafter.com/printable-icon/SmallSquareMat.png" width="70" height="70" />
<img src="https://www.thegamecrafter.com/printable-icon/SmallSquareMat.png" width="70" height="70" />
<img src="https://www.thegamecrafter.com/printable-icon/SmallSquareMat.png" width="70" height="70" />
<img src="https://www.thegamecrafter.com/printable-icon/SmallSquareMat.png" width="70" height="70" />
<img src="https://www.thegamecrafter.com/printable-icon/SmallSquareMat.png" width="70" height="70" />
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I'm trying to make a stack of images using HTML and CSS, that if I hover or click on any of them, it will be enlarged in the same page. This is what I've been able to do:
<img src ="mark1.jpg" height="150" width="300" />
<img src ="mark2.jpg" height="150" width="300" />
<img src ="mark3.jpg" height="150" width="300" />
<img src ="mark4.jpg" height="150" width="300" />
<img src ="watson1.jpg" height="150" width="300" />
<img src ="watson2.jpg" height="150" width="300" />
<img src ="watson3.jpg" height="150" width="300" />
<img src ="watson4.jpg" height="150" width="300" />
<img src ="watson5.jpg" height="150" width="300" />
<img src ="morgan1.jpg" height="150" width="300" />
<img src ="nyong1.jpg" height="150" width="300" />
<img src ="lion1.jpg" height="150" width="300" />
One possibililty using hover only is to use transform:scale
JSfiddle Demo
CSS
img {
transition:transform 0.25s ease;
}
img:hover {
-webkit-transform:scale(1.5); /* or some other value */
transform:scale(1.5);
}
Add all the images to a container, for example:
<div class="imageContainer">
<img src ="lion1.jpg" height="150" width="300" />
</div>
Then set some CSS that does something to all <img> tags in that container when hovered:
.imageContainer > img:hover {
width: 500px;
height: 200px;
}
I have not tried this but I think it might get you on the right track to experiment yourself.
Check this fiddle
HTML:
<body>
<div id="rightImage">
<img src="https://www.gravatar.com/avatar/703327d6394d273e741186dbc0109f4f?s=128&d=identicon&r=PG&f=1" alt="image"/>
</div>
</body>
CSS:
#rightImage
{
height:275px;
float:left;
position:relative;
}
#rightImage:hover img
{
height: 300px;
}
I have a header on my screen that contains 7 images.
I want the header to cover width: 100% site. The header is 1920*50px. I want the right side of the header to cut out if the screen resolution is less than 1920*1080 and not the left side.
Here's the header in html:
<div id="apDiv1">
<img src="Bilder/navbar/images/navbar-rambech_01.jpg" width="53" height="50" />
<img src="Bilder/navbar/images/navbar-rambech_02.jpg" width="236" height="50" alt="Rambech" />
<img src="Bilder/navbar/images/navbar-rambech_03.jpg" width="202" height="50" alt="Sourcebans" />
<img src="Bilder/navbar/images/navbar-rambech_04.jpg" width="135" height="50" alt="Forum" />
<img src="Bilder/navbar/images/navbar-rambech_05.jpg" width="199" height="50" alt="Søke Admin" /><img src="Bilder/navbar/images/navbar-rambech_06.jpg" width="116" height="50" alt="VIP" />
<img src="Bilder/navbar/images/navbar-rambech_07.jpg" width="979" height="50" max-width="100%" />
</div>
Here you go.
Add the below code to your CSS. This will cut images on the right side.
#apDiv1 {
width:100%;
white-space:nowrap;
overflow:hidden;
}
I want to make a navigation bar, with each item having its own image with the name of the item written on top of that. So there should be a few images in a row, and each one has some text written on it. This is the row of images I got:
<div class="navigation" align="center">
<img src="images/bn_blue.png" width="120" height="70" alt="" />
<img src="images/bn_blue.png" width="120" height="70" alt="" />
<img src="images/bn_blue.png" width="120" height="70" alt="" />
<img src="images/bn_blue.png" width="120" height="70" alt="" />
<img src="images/bn_blue.png" width="120" height="70" alt="" />
<img src="images/bn_blue.png" width="120" height="70" alt="" />
</div>
<div class="navigation" align="center">
<ul><li><div style="background-image:url(images/bn_blue.png);width:120px;height:70px">xyz</div></li>
<li><div style="background-image:url(images/bn_blue.png);width:120px;height:70px">xyz</div></li>
<li><div style="background-image:url(images/bn_blue.png);width:120px;height:70px">xyz</div></li>
<li><div style="background-image:url(images/bn_blue.png);width:120px;height:70px">xyz</div></li>
<li><div style="background-image:url(images/bn_blue.png);width:120px;height:70px">xyz</div><li>
</ul>
</div>
<style>
li
{
display:inline-block;
}
</style>
Give each a href a class ie .home_bg etc.
Then in css add a
.home_bg {
background-image: url(/example/example.png)
}
do this for each image if they are different. Then in the html remove img tags
I am a javascript/PHP programmer brand new to CSS and having some trouble getting images to display in a container with overflow. My understanding is that the below code should display the images in rows of three with 15 pixels of space between them. Instead, it displays one single image in the top left of where the div should be. If I remove the ID for the div the images display down a vertical line, and if I remove the div entirely they flow rightward across the page normally. When I gave the div a background color it appeared to be the proper size and in the proper location.
#items_container {
position:absolute;
overflow:auto;
height:500px;
width:500px;
}
.item_image {
margin: 0 15px 15px 0;
padding: 0 0 0 0;
}
<div id="items_container">
<img src="imageLocation" height="150" width="150" class="item_image" />
<img src="imageLocation" height="150" width="150" class="item_image" />
<img src="imageLocation" height="150" width="150" class="item_image" />
<img src="imageLocation" height="150" width="150" class="item_image" />
<img src="imageLocation" height="150" width="150" class="item_image" />
<img src="imageLocation" height="150" width="150" class="item_image" />
</div>
I also tried giving the container div a height/width in the HTML, and the image class a height/width in the CSS. Neither did anything. Thanks for any help, everybody!
Not sure I fully understand the question, but this is how I would layout your structure:
http://jsfiddle.net/mDXL2/
HTML
<div id="items_container">
<img src="imageLocation" height="150" width="150" class="item_image" />
<img src="imageLocation" height="150" width="150" class="item_image" />
<img src="imageLocation" height="150" width="150" class="item_image" />
<img src="imageLocation" height="150" width="150" class="item_image" />
<img src="imageLocation" height="150" width="150" class="item_image" />
<img src="imageLocation" height="150" width="150" class="item_image" />
</div>
CSS
#items_container {
overflow:hidden;
height:500px;
width:500px;
}
.item_image {
float:left;
margin: 0 15px 15px 0;
padding: 0 0 0 0;
}
The overflow hidden could be replaced by a clear, but I prefer to go the overflow hidden route.
After that you just need to float all of the .item_image elements.
I have several img tags inside of a hrefs that I use as buttons and for some reason in IE when I click the img it creates a gray box around the tag, however this only happens in IE. Any ideas on how to remove it?
Here is the code.
<div style="padding-left:115px; text-decoration:none">
<img src="button.png" width="25" height="25" style="margin-top:600px;" />
<img src="button.png" width="25" height="25" style="margin-top:600px;" />
<img src="button.png" width="25" height="25" style="margin-top:600px;" />
<img src="button.png" width="25" height="25" style="margin-top:600px;" />
<img src="button.png" width="25" height="25" style="margin-top:600px;" />
<img src="button.png" width="25" height="25" />
</div>
These are the img tags that get a gray striked outline around them when clicked.
Just Add This
a
{
outline: none;
}