• 0

CSS3 transitions


Question

The image is ignoring the padding when transitioning (see link below). Stylesheet included.

http://dl.dropbox.co.../web/index.html

body {
	background-image: url(bg.png);
}

.affiliates a {
    width: 150px; height: 150px; 
    overflow: hidden;
    float: left;
    padding: 6px;
    background: #fff;
    border-right: 1px solid #c8c8c8;
    -webkit-box-shadow: 0 1px 2px #aeaeae;
}
.affiliates img {
    margin: 0;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
}
.affiliates a:hover img {
    margin-top: -150px;}

Link to comment
Share on other sites

3 answers to this question

Recommended Posts

  • 0

I'm sure there might be other ways but this is the first that came to mind...

HTML

<link href="style.css" rel="stylesheet" type="text/css"/>


<div class="affiliates">
    <a href="">some text here</a>
</div>

CSS

body {
	background-image: url(http://dl.dropbox.com/u/710402/web/bg.png);
}

.affiliates{
	padding:6px;
	background: #FFF;
	width:150px;
	height:150px;
	-webkit-box-shadow: 0 1px 2px #aeaeae;
}

.affiliates a {
    width: 150px; 
    height: 150px; 
    overflow: hidden;
    float: left;
    background: #fff;
    border-right: 1px solid #c8c8c8;
    background: url("dibi_thumb3.png") no-repeat 50% 0;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    text-indent:-999px;
    display:block;
}

.affiliates a:hover {
    background-position: 50% 100%;
}

Link to comment
Share on other sites

  • 0

snipped

The only problem I envision with this is that using the .affiliates class on multiple thumbnails (which I plan to) will restrict me to using the same background image. That is why I was using the <img> tag in the HTML instead.

Is there another way around this?

For what it's worth, moz has box-shadow as well.

-moz-box-shadow

I know, I just hadn't got round to using it as I mainly test in Safari :)

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.