newcoder1010 Posted April 24, 2015 Share Posted April 24, 2015 Hi, I have the below code : <a href = "file.html"> <img src = "xyz.png"> </a> When I hover over the image, I would like to see the image highlighted with some color. How can I do it? Thanks, N Link to comment Share on other sites More sharing options...
tejasamrute Posted April 25, 2015 Share Posted April 25, 2015 img:hover { border:2px solid red; box-shadow: 0 0 10px #333; -webkit-box-shadow: 0 0 10px #333; -moz-box-shadow: 0 0 10px #333; -o-box-shadow: 0 0 10px #333; -ms-box-shadow: 0 0 10px #333;} above is a basic code to highlight an image......if you have something different on your mind.....let us know Link to comment Share on other sites More sharing options...
COBOLdinosaur Posted April 27, 2015 Share Posted April 27, 2015 If you want to enhance or actually enhance the image you could create an alternate version of it with the enhancement and the then use the alternate version in a swap, but you would need to use javascript for that. You could also highlight bu increasing the dimensions and bringing it forward with a z-index value. Link to comment Share on other sites More sharing options...
newcoder1010 Posted April 27, 2015 Author Share Posted April 27, 2015 img:hover { border:2px solid red; box-shadow: 0 0 10px #333; -webkit-box-shadow: 0 0 10px #333; -moz-box-shadow: 0 0 10px #333; -o-box-shadow: 0 0 10px #333; -ms-box-shadow: 0 0 10px #333;} above is a basic code to highlight an image......if you have something different on your mind.....let us know Is this css code? Link to comment Share on other sites More sharing options...
tejasamrute Posted April 27, 2015 Share Posted April 27, 2015 html <div class="container3"></div> Css .container3 { width:300px; height:300px; margin:0 auto; background-image:url('http://www.legalproductivity.com/wp-content/uploads/2013/05/firefox-300x300.png'); transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out; } .container3:hover { width:300px; height:300px; float:left; background-image:url('http://www.lilianricaud.com/travail-en-reseau/wp-content/uploads/2012/04/google-chrome-300x300.png'); -ms-transform: scale(1.2); /* IE 9 */ -webkit-transform: scale(1.2); /* Safari */ transform: scale(1.2); } Link to comment Share on other sites More sharing options...
dsonesuk Posted April 27, 2015 Share Posted April 27, 2015 Yes! but it will target all img tags, to target a specific img or group of img tags you would have to use a class ref for targeting multiple img, or id ref for singular img tag http://www.w3schools.com/cssref/sel_hover.asp http://www.w3schools.com/css/css_selectors.asp Link to comment Share on other sites More sharing options...
tejasamrute Posted April 27, 2015 Share Posted April 27, 2015 yes........@newcoder1010.....i have posted another effect with background image Link to comment Share on other sites More sharing options...
tejasamrute Posted April 27, 2015 Share Posted April 27, 2015 dsonesuk...help me out here....i did the below effect...a while ago....with img src.....but dint bother to check if it is perfectly valid under w3c..lemme if it is valid or not....<div class="container"> <a href="#"> <img src="http://www.lilianricaud.com/travail-en-reseau/wp-content/uploads/2012/04/google-chrome-300x300.png" onmouseover="this.src='http://www.legalproductivity.com/wp-content/uploads/2013/05/firefox-300x300.png'" onmouseout="this.src='http://www.lilianricaud.com/travail-en-reseau/wp-content/uploads/2012/04/google-chrome-300x300.png'" /></a> </div> .container img:hover { -ms-transform: scale(1.2); /* IE 9 */ -webkit-transform: scale(1.2); /* Safari */ transform: scale(1.2); } .container img { transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out; } .container { width:300px; height:300px; margin: 0 auto; } Link to comment Share on other sites More sharing options...
dsonesuk Posted April 27, 2015 Share Posted April 27, 2015 CSS is valid, it just gives warning about browser specific styling being unknown vendor extension. HTML nothing major just has a invalid warning about no alt attribute for img tag which is required, using empty value for alt attribute would validate it. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now