How do you make an image enlarge when you hover over it?

HTML & CSS
1

I am having trouble having a thumbnail image enlarge when I hover over it.
The image enlarges when I hover over other areas of the page not just when I hover over the image. What do you think I am doing wrong to cause this? Also if I click on the thumbnail it opens up on another page. How do I prevent it from opening up on another page. I have the code I used below

HTML

<div class="thumbnail1">
  <a target="_blank" href="image1.jpg"> <img src="image1.jpg" alt="Fjords" </a>
</div>

CSS

.thumbnail1 {
  width: 450px; 
  padding: 0px 0;
  position: relative; 
  overflow: hidden; 
  }

.thumbnail1 > .wrap {
  background-repeat: no-repeat; 
  background-size: cover;
  position: absolute; 
  top: 0; 
  bottom: 0; 
  left: 0; 
  right: 0;
  transform: scale(1); 
  transition: transform 0.5s ease-in-out; z-index: -1; 
  }

.thumbnail1 { 
  transition: all 0.4s ease-in-out; 
  }

.thumbnail1:hover {
  transform: scale(1.5); 
  margin: -50px 0px 60px 100px;
  } }
2

Hi, johned22; welcome to the forums.

Please read our posting guidelines for some suggestions about posting code.
Forum Posting Basics

We will need to see the HTML that goes with the CSS and know the dimensions of any images.
Ideally, a “working page”, one that starts with (or whatever doctype you are using) and ends with and contains the least amount of HTML and CSS to demonstrate the problem. To include the code in a post, put three backticks on a line by themselves before the code and three more backticks on a line by themselves after the code to preserve your formatting.

You can also highlite your code and click the </> symbol in the editor’s menu to preserve your formatting.

Instead of a “working page”, you might create a CodePen that demonstrates the issue or provide a link to your page.

FYI, “Fjords” is not a link.

As as example of a “working page”, I tried to create a “working page” using the code that you provided. Perhaps you can fill in some missing pieces so we will have a better idea of what you are trying to do.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="css/stylesheet.css">
    <title>enlarge on hover</title>
<!--
https://www.sitepoint.com/community/t/how-do-you-make-an-image-enlarge-when-you-hover-over-it/232451?u=ronpat
Johned22
Aug 2,2016 11:04 PM
-->
    <style type="text/css">

.thumbnail1 {
    width:450px;
    padding:0;
    position:relative;
    overflow:hidden;
}
.thumbnail > .wrap {
    background-repeat:no-repeat;
    background-size:cover;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    transform:scale(1);
    transition:transform 0.5s ease-in-out;
    z-index:-1;
}
.thumbnail1 {
    transition:all 0.4s ease-in-out;
}
.thumgbnail1:hover {
    transform:scale(1.5);
    margin:-50px 0 60px 100px;
}

    </style>
</head>
<body>

<div class="thumbnail1">
    <div class="wrap"><img src="http://placehold.it/700x400/"></div>
</div>

</body>
</html>
3

Hello

Thanks for your reply.
I used CodePen with the HTML and CSS code.This is the link- http://codepen.io/Johned22/pen/vKzAyd

Is this easier to understand?
Thanks in advance

4

Fixed that.

Just one note in doing that @Johned22, you seem to have two closing curly braces at the end of your CSS. The browser will probably ignore it, but it’s worth just checking that you don’t have any other stray characters in your code whilst you have it open.

5

You have included target="_blank" in your code, which instructs the browserr to do exactly that. Remove that to have the link open in the same tab/window. (target="_blank" causes accessibility issues and as a general rule is best avoided.)

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.