Tue, 2010-08-03 23:40
hI all
I have several images, each of which hyperlink to videos. i would like to make it feel more interesting so that when the user hovers over the image a border appears around the image.
so my question is, do i have to create a seperate hover style for all my images that link to the videos?
I have already created an a.hover for all my text links. It's called #centerColumn #textlinks a:hover
At the momment my html code for my images is something like this
<div class="float-left"><a href="videos/intro.wmv"><img src="images/Intro-320.jpg" alt="one" width="320" height="256" border="2" /></a> <p>Introduction from Mr king</p> </div>
My css that i use to float the images is
} .float-left { width: 320px; margin-left: 150px; float: left; height: 256px; }
Wed, 2010-08-04 00:48
#1
Hi, If you are using the
Hi,
If you are using the "float-left" divs only as container for the images you can add this to the CSS:
.float-left a:hover { outline: 2px solid #f90; } img { border: 0; }
Wed, 2010-08-04 14:57
#2
webster12345, try this way. I
webster12345, try this way. I do it all the time. Borders will need to be on the inactive and hover states of the images, or they will jump on hover.
img {border: 2px solid transparent;} img:hover {border: 2px solid #e0e0e0;}
First basic few steps in building a webpage
1. Gather and collect content.
2. Organize the content into meaningful semantic valid HTML
3. Design the prototype
4. Style using CSS
Wed, 2010-08-04 19:54
#3
Hi Petz_e Thanks, this method
Hi Petz_e
Thanks, this method works nicely, just one query, i changed the value of border:0; to 5, but nothing seemed to happen. I thought maybe it would give the image a border from which it then jumped to outline 2px when the mouse hovered over it.
What if i want to give the image a border to begin with which then swaps to outline 2px solid #f90;
Wed, 2010-08-04 20:05
#4
Hi CupidsToejam Thanks for
Hi CupidsToejam
Thanks for suggestion, but im not sure where exaclty to place this code ?
I tried adding the two lines to my .float-left and then tried .float-left a:hover, but neither seemed to work. See what i tried with your code below. I suspect i have misunderstood you.
.float-left a:hover { img {border: 2px solid transparent;} img:hover {border: 2px solid #e0e0e0;} } .float-left { width: 320px; margin-left: 150px; float: left; height: 256px; img {border: 2px solid transparent;} img:hover {border: 2px solid #e0e0e0;} }
Thu, 2010-08-05 13:32
#5
it would be
it would be this...
.float-left img {border: 2px solid transparent;} .float-left img:hover {border: 2px solid #e0e0e0;}
This will style the image only.
First basic few steps in building a webpage
1. Gather and collect content.
2. Organize the content into meaningful semantic valid HTML
3. Design the prototype
4. Style using CSS
Fri, 2010-08-13 23:50
#6
Many thanks for this
Many thanks for this feedback.
Thu, 2010-08-19 12:13
#7
hi CupidsToejam I just tried
hi CupidsToejam
I just tried exactly what you said
.float-left {
width: 320px;
margin-left: 50px;
float: left;
height: 256px;
margin-bottom: 50px;
img {border: 2px solid transparent;}
img:hover {border: 2px solid #e0e0e0;}
}
I even tried taking out the curly brackets after your two lines, but still no joy, sorry im probably being really dumb here.
.float-left {
width: 320px;
margin-left: 50px;
float: left;
height: 256px;
margin-bottom: 50px;
img {border: 2px solid transparent;
img:hover {border: 2px solid #e0e0e0;
}
Thu, 2010-08-19 15:52
#8
Why do you have those tags
Why do you have those tags nested inside other ones?
Fri, 2010-08-20 09:30
#9
Hi Deuce Thanks for pointing
Hi Deuce
Thanks for pointing that out, i was was being really dumb, I have managed to get it working now. This is the best solution because i found by using the outline tag that it didnt work in ie 7. the border tag seemed to fix this.
Thanks everybody for helping me get there.