Edit Question - KnowledgeHub

Title Body

The HTML structure <div id="small_gal"> <div><img src="images1.jpg" /></div> <div><img src="images1.jpg" /></div> <div><img src="images1.jpg" /></div> <div><img src="images1.jpg" /></div> <div><img src="images1.jpg" /></div> <div><img src="images1.jpg" /></div> <div><img src="images1.jpg" /></div> <div><img src="images1.jpg" /></div> </div> The images are having dropshadows so border is not a solution, as it will be outside the image The border is having transition and it works smoothly on FF but not in chrome or other browsers Here is the code which I have used #small_gal div:hover{cursor: pointer;} #small_gal div:after { content: ''; position: absolute; width: 112px; height: 81px; border: 3px solid #e27501; left: 9px; top: 9px; z-index: 9; opacity: 0; -webkit-transition: opacity 0.5s ease-in-out; -moz-transition: opacity 0.5s ease-in-out; -o-transition: opacity 0.5s ease-in-out; -ms-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; } #small_gal div:hover:after { opacity: 1; } Note: #small_gal is only the container each image is wrapped in a div so we can implement :after

Tags (comma-separated) Cancel