Archief - CSS 3 hover probleem

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
d

demon326

Legacy Member
Hallo allen,

Ik heb deze pagina min of meer nagebouwd; Photo Gallery (Demo) | 3 Waves Media - Web + Print + Branding en ik gebruik diezelfde classes(zie code hier beneden) maar als ik over mijn versie hover, dan slaat de hover op alle afbeeldingen tegelijk, wat natuurlijk niet de bedoeling is.


HTML: 
<div class="dimage">
<a class="imagefield imagefield-lightbox2 imagefield-lightbox2-thumb_gallery imagefield-field_img imagecache imagecache-field_img imagecache-thumb_gallery imagecache-field_img-thumb_gallery lightbox-processed" rel="lightbox[field_img][Firewind + Wolf + Vanderbuyst 17/09&lt;br /&gt;&lt;br /&gt;&lt;a href=&quot;http://localhost/ashladan/files/gallery/Chrysanthemum.jpg&quot; target=&quot;_blank&quot; id=&quot;lightbox2-download-link-text&quot;&gt;Download Original&lt;/a&gt;]" href="http://localhost/ashladan/files/gallery/Chrysanthemum.jpg"><img width="180" height="180" title="" alt="Firewind + Wolf + Vanderbuyst 17/09" src="http://localhost/ashladan/files/imagecache/thumb_gallery/gallery/Chrysanthemum.jpg"></a><a class="imagefield imagefield-lightbox2 imagefield-lightbox2-thumb_gallery imagefield-field_img imagecache imagecache-field_img imagecache-thumb_gallery imagecache-field_img-thumb_gallery lightbox-processed" rel="lightbox[field_img][Firewind + Wolf + Vanderbuyst 17/09&lt;br /&gt;&lt;br /&gt;&lt;a href=&quot;http://localhost/ashladan/files/gallery/Desert.jpg&quot; target=&quot;_blank&quot; id=&quot;lightbox2-download-link-text&quot;&gt;Download Original&lt;/a&gt;]" href="http://localhost/ashladan/files/gallery/Desert.jpg"><img width="180" height="180" title="" alt="Firewind + Wolf + Vanderbuyst 17/09" src="http://localhost/ashladan/files/imagecache/thumb_gallery/gallery/Desert.jpg"></a><a class="imagefield imagefield-lightbox2 imagefield-lightbox2-thumb_gallery imagefield-field_img imagecache imagecache-field_img imagecache-thumb_gallery imagecache-field_img-thumb_gallery lightbox-processed" rel="lightbox[field_img][Firewind + Wolf + Vanderbuyst 17/09&lt;br /&gt;&lt;br /&gt;&lt;a href=&quot;http://localhost/ashladan/files/gallery/Hydrangeas.jpg&quot; target=&quot;_blank&quot; id=&quot;lightbox2-download-link-text&quot;&gt;Download Original&lt;/a&gt;]" href="http://localhost/ashladan/files/gallery/Hydrangeas.jpg"><img width="180" height="180" title="" alt="Firewind + Wolf + Vanderbuyst 17/09" src="http://localhost/ashladan/files/imagecache/thumb_gallery/gallery/Hydrangeas.jpg"></a><a class="imagefield imagefield-lightbox2 imagefield-lightbox2-thumb_gallery imagefield-field_img imagecache imagecache-field_img imagecache-thumb_gallery imagecache-field_img-thumb_gallery lightbox-processed" rel="lightbox[field_img][Firewind + Wolf + Vanderbuyst 17/09&lt;br /&gt;&lt;br /&gt;&lt;a href=&quot;http://localhost/ashladan/files/gallery/Jellyfish.jpg&quot; target=&quot;_blank&quot; id=&quot;lightbox2-download-link-text&quot;&gt;Download Original&lt;/a&gt;]" href="http://localhost/ashladan/files/gallery/Jellyfish.jpg"><img width="180" height="180" title="" alt="Firewind + Wolf + Vanderbuyst 17/09" src="http://localhost/ashladan/files/imagecache/thumb_gallery/gallery/Jellyfish.jpg"></a><a class="imagefield imagefield-lightbox2 imagefield-lightbox2-thumb_gallery imagefield-field_img imagecache imagecache-field_img imagecache-thumb_gallery imagecache-field_img-thumb_gallery lightbox-processed" rel="lightbox[field_img][Firewind + Wolf + Vanderbuyst 17/09&lt;br /&gt;&lt;br /&gt;&lt;a href=&quot;http://localhost/ashladan/files/gallery/Koala.jpg&quot; target=&quot;_blank&quot; id=&quot;lightbox2-download-link-text&quot;&gt;Download Original&lt;/a&gt;]" href="http://localhost/ashladan/files/gallery/Koala.jpg"><img width="180" height="180" title="" alt="Firewind + Wolf + Vanderbuyst 17/09" src="http://localhost/ashladan/files/imagecache/thumb_gallery/gallery/Koala.jpg"></a><a class="imagefield imagefield-lightbox2 imagefield-lightbox2-thumb_gallery imagefield-field_img imagecache imagecache-field_img imagecache-thumb_gallery imagecache-field_img-thumb_gallery lightbox-processed" rel="lightbox[field_img][Firewind + Wolf + Vanderbuyst 17/09&lt;br /&gt;&lt;br /&gt;&lt;a href=&quot;http://localhost/ashladan/files/gallery/Lighthouse.jpg&quot; target=&quot;_blank&quot; id=&quot;lightbox2-download-link-text&quot;&gt;Download Original&lt;/a&gt;]" href="http://localhost/ashladan/files/gallery/Lighthouse.jpg"><img width="180" height="180" title="" alt="Firewind + Wolf + Vanderbuyst 17/09" src="http://localhost/ashladan/files/imagecache/thumb_gallery/gallery/Lighthouse.jpg"></a><a class="imagefield imagefield-lightbox2 imagefield-lightbox2-thumb_gallery imagefield-field_img imagecache imagecache-field_img imagecache-thumb_gallery imagecache-field_img-thumb_gallery lightbox-processed" rel="lightbox[field_img][Firewind + Wolf + Vanderbuyst 17/09&lt;br /&gt;&lt;br /&gt;&lt;a href=&quot;http://localhost/ashladan/files/gallery/Penguins.jpg&quot; target=&quot;_blank&quot; id=&quot;lightbox2-download-link-text&quot;&gt;Download Original&lt;/a&gt;]" href="http://localhost/ashladan/files/gallery/Penguins.jpg"><img width="180" height="180" title="" alt="Firewind + Wolf + Vanderbuyst 17/09" src="http://localhost/ashladan/files/imagecache/thumb_gallery/gallery/Penguins.jpg"></a><a class="imagefield imagefield-lightbox2 imagefield-lightbox2-thumb_gallery imagefield-field_img imagecache imagecache-field_img imagecache-thumb_gallery imagecache-field_img-thumb_gallery lightbox-processed" rel="lightbox[field_img][Firewind + Wolf + Vanderbuyst 17/09&lt;br /&gt;&lt;br /&gt;&lt;a href=&quot;http://localhost/ashladan/files/gallery/Tulips.jpg&quot; target=&quot;_blank&quot; id=&quot;lightbox2-download-link-text&quot;&gt;Download Original&lt;/a&gt;]" href="http://localhost/ashladan/files/gallery/Tulips.jpg"><img width="180" height="180" title="" alt="Firewind + Wolf + Vanderbuyst 17/09" src="http://localhost/ashladan/files/imagecache/thumb_gallery/gallery/Tulips.jpg"></a>	 </div>

css:
Code: 
.dimage {
 /* width: 182px;*/
  float: left;
  margin: 0px 22px 20px 0px;
}

.dimage img {
  background: #ececec;
  border: 1px solid #ccc;
  padding: 6px;
  
  -webkit-box-shadow: 0px 2px 10px #cccccc;
  -moz-box-shadow: 0px 2px 10px #cccccc;
  box-shadow: 0px 2px 10px #cccccc;
  
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  -ms-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.dimage:hover img{
  background: #fff;
  border: 1px solid #fff;
  padding: 6px;
  
  -webkit-box-shadow: 0px 0px 0px #cccccc;
  -moz-box-shadow: 0px 0px 0px #cccccc;
  box-shadow: 0px 0px 0px #cccccc;
-

-BVR-

Legacy Member
zet die :hover eens op img i.p.v. op .dimage? Dat is het eerste dat in mijn opkwam :p Oh en uw css is niet gesloten hé.

}
Z

Zero Grav

Legacy Member
Al uw links zijn eigenlijk gewoon één grote soep. Ge werkt op een hoop plaatsen met html-entities in plaats van echte html-tags waardoor alles in elkaar overloopt, de browser toont het dus eigenlijk wel correct.
d

demon326

Legacy Member
Zero Grav zei:
Al uw links zijn eigenlijk gewoon één grote soep. Ge werkt op een hoop plaatsen met html-entities in plaats van echte html-tags waardoor alles in elkaar overloopt, de browser toont het dus eigenlijk wel correct.
Klik om te vergroten...

Vreemd, de broncode is via firefox correct.. zal wel door mijn database(lokaal) komen, deze staat volgens mij verkeerd ingesteld, zal dat dus wel zijn :sop:
d

demon326

Legacy Member
benny zei:
Vreemd, de broncode is via firefox correct.. zal wel door mijn database(lokaal) komen, deze staat volgens mij verkeerd ingesteld, zal dat dus wel zijn :sop:.
Klik om te vergroten...


BramVroy zei:
zet die :hover eens op img i.p.v. op .dimage? Dat is het eerste dat in mijn opkwam :p Oh en uw css is niet gesloten hé.

}
Klik om te vergroten...

copy/past foutje:D.


Code: 
.dimage:hover img

Zorgt er in feite voor dat de target de img tag binnen deze div is;)
-

-BVR-

Legacy Member
benny zei:
copy/past foutje:D.


Code: 
.dimage:hover img

Zorgt er in feite voor dat de target de img tag binnen deze div is;)
Klik om te vergroten...

Weet ik, maar hier maakt dat niet uit. Uw div is toch even groot als uw image?
d

demon326

Legacy Member
BramVroy zei:
Weet ik, maar hier maakt dat niet uit. Uw div is toch even groot als uw image?
Klik om te vergroten...

Heb het dan maar zonder css3 gedaan en de css gebruikt die ik voor elke afbeelding op de site gebruik, werkt wel netjes :).
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan