CSS3 hover
Ik wil het volgende bereiken:
http://andreagandino.com/themes/acidrain/?page_id=817
Waneer je over een thumb gaat, bijv de tweede, dan krijg je een plusje in een beweging te zien. Dit is met css3 bereikt, maar helaas lukt dit mij niet. Ik heb namelijk geen idee hoe nou die opbouw van divs en css3 transition werkt. Kan iemand mij helpen?
Code (php)
1
2
3
4
2
3
4
<a href="#" title="afbeelding">
<img src="afbeelding.jpg" alt="afbeelding" />
<span class="overlay"></span>
</a>
<img src="afbeelding.jpg" alt="afbeelding" />
<span class="overlay"></span>
</a>
CSS:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
a {
display: block;
position: relative;
width: 150px;
height: 150px;
overflow: hidden;
}
a img {
position: absolute;
top: 0;
left: 0;
}
a .overlay {
position: absolute;
top: 0;
left: 0;
display: none;
width: 150px;
height: 150px;
background: red;
}
a:hover .overlay {
display: block;
}
display: block;
position: relative;
width: 150px;
height: 150px;
overflow: hidden;
}
a img {
position: absolute;
top: 0;
left: 0;
}
a .overlay {
position: absolute;
top: 0;
left: 0;
display: none;
width: 150px;
height: 150px;
background: red;
}
a:hover .overlay {
display: block;
}
Voor speciale effecten met CSS3 moet je maar ff google ;-) Maar hier heb je alvast een voorbeeld.
Code (php)
1
2
3
4
2
3
4
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
dit zet je bij je main div
dan bij de hover div :
Code (php)
1
2
3
4
2
3
4
.test:hover
{
width:500px;
}
{
width:500px;
}
wat hij gaat doen is de breedte van 200 px naar 500px transitionen in 2 secondes dit werkt ook met opacity
Code (php)
1
2
3
4
5
2
3
4
5
opacity:1.0;
transition:opacity 2s;
-moz-transition:opacity 2s; /* Firefox 4 */
-webkit-transition:opacity 2s; /* Safari and Chrome */
-o-transition:opacity 2s; /* Opera */
transition:opacity 2s;
-moz-transition:opacity 2s; /* Firefox 4 */
-webkit-transition:opacity 2s; /* Safari and Chrome */
-o-transition:opacity 2s; /* Opera */
Code (php)
1
2
3
4
2
3
4
.test:hover
{
opacity:0.5;
}
{
opacity:0.5;
}
probeer dit ff
HTML
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<li class="grid_4 projectbox alpha">
<a href="#">
<div class="thumbnails">
<img src="images/portfolio/thumbnails/thumbnail.png" alt="Thumbnail">
<span class="overlay"></span>
</div><!-- End .thumbnails -->
</a>
<div class="description">
<h3><a href="#">Title Project</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis ante eros.
</p>
</div><!-- End .description -->
<div class="tags">
Tags: Photoshop, Illustrator, Graphic design
</div><!-- End .tags -->
</li><!-- End li.grid_4 projectbox -->
<a href="#">
<div class="thumbnails">
<img src="images/portfolio/thumbnails/thumbnail.png" alt="Thumbnail">
<span class="overlay"></span>
</div><!-- End .thumbnails -->
</a>
<div class="description">
<h3><a href="#">Title Project</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis ante eros.
</p>
</div><!-- End .description -->
<div class="tags">
Tags: Photoshop, Illustrator, Graphic design
</div><!-- End .tags -->
</li><!-- End li.grid_4 projectbox -->
CSS
(Dit is nog voordat ik de code toepaste van Hertog Jan).
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
.projectbox {
height: auto;
width: 300px;
margin: 10px auto 0 0;
padding: 0;
padding-bottom: 10px;
background: #FFF;
/*box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);*/
}
.projectbox:hover h3 a {
color: #c0479a;
text-decoration: underline;
}
.thumbnails {
height: auto;
width: 100%;
margin: 0 auto;
float: left;
opacity: 0.5;
-webkit-transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
-o-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
position: relative;
}
.thumbnails:hover {
opacity: 1.0;
}
.overlay {
background: url(../images/link-icon.png);
}
.description {
padding: 0 10px;
float: left;
}
.tags {
padding: 0 10px 10px;
float: left;
color: #999;
}
height: auto;
width: 300px;
margin: 10px auto 0 0;
padding: 0;
padding-bottom: 10px;
background: #FFF;
/*box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);*/
}
.projectbox:hover h3 a {
color: #c0479a;
text-decoration: underline;
}
.thumbnails {
height: auto;
width: 100%;
margin: 0 auto;
float: left;
opacity: 0.5;
-webkit-transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
-o-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
position: relative;
}
.thumbnails:hover {
opacity: 1.0;
}
.overlay {
background: url(../images/link-icon.png);
}
.description {
padding: 0 10px;
float: left;
}
.tags {
padding: 0 10px 10px;
float: left;
color: #999;
}
Hopelijk komen we er uit!
Toevoeging op 15/09/2012 19:15:21:
Ik heb het tot zover, dat de overlay boven de afbeelding is gekomen. Nu wil ik dan nog als laatst een transition, zoals de site hierboven eerder vermeld. Dat er een plusje van een niks tot een rondje wordt vergoot.
Via firebug, geeft hij aan dat dit de css daarvoor is
Code (php)
1
-moz-transition: all 0.1s ease-in-out 0s;
Maar naar het uitproberen, werkt dit niet bij mij. Waar kan dit aan liggen?