Hi there,
I am currently redesigning my website, but I have hit a brick wall.
I have a list of article headlines, each with an image. Now, on hover I am trying to increase both the height and width to give a “zoom” effect. Unfortunately, only the height is changing, the width remains unchanged. I honestly have no idea what I have missed here.
Here is the CSS
.pic {
height:150px;
width:250px;
overflow:hidden;
margin-right:20px;
float:left
}
/*GROW*/
.grow img {
height:150px;
width:250px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease
}
.grow img:hover {
height:225px;
width:300px
}
And here is the HTML
<div class="grow pic">
<a href="/latest/"><img src="/images/articles/thumbs/drone.jpg" alt="Drone"/></a>
</div>
Hi there klikThat,
and a warm welcome to these forums.
Here is one possible solution…
<!DOCTYPE html>
<html lang="en">
<head>
<base href="http://coothead.co.uk/images/">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<style media="screen">
body {
background-color: #f0f0f0;
}
#container {
text-align: center;
}
#container ul {
display: inline-block;
padding: 0;
margin: 0;
list-style: none;
}
#container li {
position: relative;
padding-top: 10.2em;
}
#container a {
position: absolute;
top: 0;
left: -8em;
z-index: 0;
width: 16em;
padding: 0.15em;
border: 0.06em solid #999;
background: #fff;
box-shadow:0 0 0 #fff;
opacity: 0.75;
transition: all 1s ease
}
#container img {
display: block;
width: 100%;
height: auto;
}
#container a:hover {
z-index: 200;
left: -16em;
width: 32em;
padding: 0.3em;
box-shadow: 0.6em 0.6em 0.6em #666;
opacity: 1;
}
#container li:nth-child(2) a:hover {
top: -50%;
}
#container li:nth-child(3) a:hover {
top: -100%;
}
</style>
</head>
<body>
<div id="container">
<ul>
<li><a href="#"><img src="face-1.jpg" alt="face one"></a></li>
<li><a href="#"><img src="gaze.gif" alt="gaze"></a></li>
<li><a href="#"><img src="face-2.jpg" alt="face two"></a></li>
</ul>
<!-- #container --></div>
</body>
</html>
coothead
1 Like
…or perhaps you may prefer a horizontal version…
<!DOCTYPE html>
<html lang="en">
<head>
<base href="http://coothead.co.uk/images/">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<style media="screen">
body {
background-color: #f0f0f0;
}
#container {
padding: 0;
margin: 1em 0;
list-style: none;
text-align: center;
}
#container li {
position: relative;
display: inline-block;
width:17em;
}
#container a {
position: absolute;
top: 0;
left: 0;
z-index: 0;
width: 16em;
padding: 0.15em;
border: 0.06em solid #999;
background: #fff;
box-shadow:0 0 0 #fff;
opacity: 0.75;
transition: all 1s ease-in-out;
}
#container img {
display: block;
width: 100%;
height: auto;
}
#container a:hover {
z-index: 200;
left: 1em;
width: 32em;
padding: 0.3em;
box-shadow: 0.6em 0.6em 0.6em #666;
opacity: 1;
}
#container li:nth-child(2) a:hover {
left: -8em;
}
#container li:nth-child(3) a:hover {
left: -17.3em;
}
</style>
</head>
<body>
<ul id="container">
<li><a href="#"><img src="face-1.jpg" alt="face one"></a></li>
<li><a href="#"><img src="gaze.gif" alt="gaze"></a></li>
<li><a href="#"><img src="face-2.jpg" alt="face two"></a></li>
</ul>
</body>
</html>
coothead
1 Like
system
Closed
August 26, 2016, 7:52am
4
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.