Jump to content

How to highlight an image when i hover over


newcoder1010

Recommended Posts

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

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

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

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

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...