PHP-Fusion.at - Offizielle Supportseite für PHP-Fusion

Tutorials

Eine immer größer werdende Tutorialdatenbank.

PHP-Fusion Core

Aktuelle PHP-Fusion Vollversionen und Updates

Addon Downloads

Alle Downloads garantiert Kostenlos

Support 24/7

24 Stunden, 7 Tage die Woche, das ganze Jahr.

Du hast in deinem Browser kein Javascript aktiviert.
Um diese Seite korrekt anzuzeigen ist Javascript jedoch zwingend nötig.
Bitte aktiviere Javascript in den Einstellungen deines Browser beziehungsweiße besorge dir einen Browser, der diesen unterstützt.
Mozilla Firefox | Safari | Opera | Google Chrome | Internet Explorer höher Version 6

Div - Highlighteffekt

Kategorie: CSS

PHP-Fusion Version: Keine

Quelle: code-tricks.com

Schwierigkeitsgrad:

Hervorgehobenes div

Faq

HTML-Code

GeSHi: HTML

<div class="container"> 
 <div class="box">
   <img src="http://placehold.it/100x100">
   <p>Lorem ipsum dolor sit amet.</p>
 </div> 
 <div class="box">
   <img src="http://placehold.it/100x100">
   <p>Lorem ipsum dolor sit amet.</p>
 </div> 
 <div class="box">
   <img src="http://placehold.it/100x100">
   <p>Lorem ipsum dolor sit amet.</p>
 </div> 
 <div class="box">
   <img src="http://placehold.it/100x100">
   <p>Lorem ipsum dolor sit amet.</p>
 </div> 
 <div class="box">
   <img src="http://placehold.it/100x100">
   <p>Lorem ipsum dolor sit amet.</p>
 </div> 
 <div class="box">
   <img src="http://placehold.it/100x100">
   <p>Lorem ipsum dolor sit amet.</p>
 </div> 
 <div class="box">
   <img src="http://placehold.it/100x100">
   <p>Lorem ipsum dolor sit amet.</p>
 </div> 
 <div class="box">
   <img src="http://placehold.it/100x100">
   <p>Lorem ipsum dolor sit amet.</p>
 </div> 
 <div class="box">
   <img src="http://placehold.it/100x100">
   <p>Lorem ipsum dolor sit amet.</p>
 </div> 
 <div class="box">
   <img src="http://placehold.it/100x100">
   <p>Lorem ipsum dolor sit amet.</p>
 </div> 
 <div class="box">
   <img src="http://placehold.it/100x100">
   <p>Lorem ipsum dolor sit amet.</p>
 </div> 
 <div class="box">
   <img src="http://placehold.it/100x100">
   <p>Lorem ipsum dolor sit amet.</p>
 </div> 
</div>
gewandelt in 0.003 Sekunden, benutzt wurde GeSHi 1.0.8.10

CSS

GeSHi: CSS

/*Style the DIV*/
.container .box{
  width: 100px;
  float: left; 
  margin: 2px;
  padding: 5px;
  border: 1px solid #ccc;
  text-align: center;
}
 
/*Fade all the DIV when user hovers on any div*/
.container:hover .box{
  zoom: 1;
  filter: alpha(opacity=45);
  opacity: 0.45;
  -webkit-transition: opacity .5s ease-in-out;
  -moz-transition: opacity .5s ease-in-out;
  -ms-transition: opacity .5s ease-in-out;
  -o-transition: opacity .5s ease-in-out;
  transition: opacity .5s ease-in-out;
}
 
/*Fade out the particular DIV when user hover on that DIV*/
.container .box:hover{
  box-shadow: 3px 3px 15px #666;
  border-color:#C76C0C;
  background: #C76C0C;
  color: #fff;
  cursor: pointer;
 
  /*Opacity*/
  zoom: 1;
  filter: alpha(opacity=100);
  opacity: 1;
}
gewandelt in 0.002 Sekunden, benutzt wurde GeSHi 1.0.8.10