Issue with rollover image in css and html when using a selection of different images

I have created a list of images on one of my web pages that when hovered over, it loses its opacity a bit and displays text over the top of the image. However, I can only get this to work through CSS meaning that I can have only one image linked to the class which means I have to have the same image see image below for a better illustration: ![enter image description here][1] What I have tried is taking the image link out of the CSS and putting it into each list item, each with a different image (which is what I want). But then the image doesnt appear nicely within the border and the hover effect doesnt work, see image below for a better illustration: ![enter image description here][2] [1]: http://i.stack.imgur.com/m3CpU.jpg [2]: http://i.stack.imgur.com/MBFwe.jpg Below is my HTML and CSS for the list (with the image link in the CSS and not in the HTML): HTML CSS .rollover_img { width: 297px; height: 150px; background-position: top; background-image: url(../images/homegallery/image2.png); -moz-border-radius:10px; -webkit-border-radius:10px; border: 3px solid #7E9ED2; font:13px normal Arial, Helvetica, sans-serif; line-height:18px; float:left; margin:0 10px 18px 0; } .rollover_img a { color: #fff; width: 297px; height: 150px; display: block; text-decoration: none; } .rollover_img a:hover { background:#000; opacity:.60; filter:alpha(opacity=60); } .rollover_img a span { display: none; width: 280px; padding:5px; } .rollover_img a:hover span { display: block; } ul.imagelist { width: 939px; margin: 0 auto; padding-top: 49px; } Anyone with any ideas would be much appreciated. Thanks

以上就是Issue with rollover image in css and html when using a selection of different images的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » HTML5 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏