ynnoj Posted November 17, 2010 Share Posted November 17, 2010 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 More sharing options...
0 PT 13 Posted November 18, 2010 Share Posted November 18, 2010 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 More sharing options...
0 Cupcakes Posted November 18, 2010 Share Posted November 18, 2010 For what it's worth, moz has box-shadow as well. -moz-box-shadow Link to comment Share on other sites More sharing options...
0 ynnoj Posted November 18, 2010 Author Share Posted November 18, 2010 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 More sharing options...
Question
ynnoj
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