Moin,

hab mal wieder ein kleine Frage, mir gefällt die Bilder Animation sehr gut (wenn man mit der Maus über ein Bild fährt)

http://tdaboulder.com/leadership

Wie könnte ich so etwas umsetzten?

  
<li class=" " style="display: block;">  
    <div class="wrapper" style="height: 150px; display: block;"></div>  
    <div class="content" style="opacity: 1; display: block;"></div>  
</li>

hier wird mit inline-Styles gearbeitet, -> nicht so schön!

Du könntest das HTML so machen:

  
<figure>  
   <img ...>  
   <figcaption> .... </figcaption>  
</figure>  

und dann das css so:

  
figure {height:200px;}  
img {height:150px;}  
figcaption {height:50px;}  
  
figure:hover img {height:200px;}  
figure:hover figcaption {height:0;}  

Alternativ arbeitest Du wie im Beispiel mit opacity
Noch transition einfügen für einen sanften Übergang.

LG Matthias

Moin,

kann es sein dass <figure> vom Browser ein Abstand von "1em" bekommt?

In meinem CSS Code steht davon nämlich nichts

  
	.seite {  
		width:980px;  
		margin:0 auto;  
	}  
  
	div {  
         transition: all 1s ease;  
      }  
	  
      figure {  
         position: relative;  
		 float:left;  
         width: 310px;  
         height: 200px;  
		  
      }  
      figure>div {  
         position: relative;  
         width: 310px;  
         height: 150px;  
         overflow: hidden;  
         z-index: 10;  
      }  
      figure>div:hover {  
         width: 310px;  
         height: 320px;  
         z-index: 10;  
      }  
      figure>div img {  
         z-index: 10;  
      }  
      figcaption {  
         display: block;  
         position: absolute;  
         width: 310px;  
         bottom: 5px;  
         z-index: 5;  
      }  
  
      figcaption span {  
         display: block;  
      }  
	  
	  .titel {  
		  font-weight:bold;  
		  margin-bottom:2px;  
	  }  
	  
	  .bezeichnug {  
		  font-size:14px;  
		  color:#333;  
	  }  

Hallo,

hab noch ein weiteres "Problem" um mein "float" aufzuheben nehme ich ein

<div style="clear:both;"></div>

ich kann mir denken, dass dieses bestimmt total überflüssig ist. Wie macht ihr das?

Mein HTML Code

  
 <nav>  
 	<ul>  
    	<li><a href="#">Nav 1</a></li>  
    	<li><a href="#">Nav 2</a></li>  
    	<li><a href="#">Nav 3</a></li>  
    	<li><a href="#">Nav 4</a></li>  
    </ul>  
 </nav>  
  
 <div style="clear:both;"></div>  
  
 <figure>  
     <div>  
     	<img src="team/vorschau/1.jpg" alt="Mitarbeiter 1" />  
     </div>  
     <figcaption>  
        <span>Name der Person</span>  
        <span>Was macht diese Person in der Firma?</span>  
     </figcaption>  
 </figure>  

und mein CSS Code

  
nav ul {  
	font-size:0.89em;  
}  
  
nav ul li {  
	float: left;  
	display: block;  
	margin: 0 10px 0 0;  
}  
  
nav ul li a {  
	padding:5px 7px 3px 7px;  
}  
  
figure:nth-of-type(3n){  
	margin:0 0px 20px 0  
}  
  
figure {  
    position: relative;  
    width: 300px;  
    height: 200px;  
	float:left;  
	margin:0 17px 20px 0  
}  
  
figure>div {  
    transition: all 1s ease;  
    position: relative;  
    height: 150px;  
    overflow: hidden;  
    z-index: 10;  
}  
  
figure>div:hover {  
    height: 320px;  
}  
  
figure>div img {  
    z-index: 10;  
}  
  
figcaption {  
    display: block;  
    position: absolute;  
    width: 400px;  
    bottom: 5px;  
    z-index: 5;  
}  
  
figcaption span {  
    display: block;  
}  

Hallo,

ich habe noch eine kleine Frage zur Umsetzung einer Team Seite. Gehen wir wieder von diesem Beispiel aus. Ich dachte an folgendes

  
  
 <main>  
 	<article>  
 	    <h2>Sturmverliebt</h2>  
            <img src="team/sturmverliebt.jpg" alt="Sturmverliebt" />  
 	</article>  
  
    <aside>  
    	<section>  
            <h2>Nächste Mitarbeiterin</h2>  
            <h3>Position der Mitarbeiterin</h3>  
            <p>Hier kommt eine Beschreibung rein, was diese Mitarbeiterin macht</p>  
        </section>  
    </aside>  
 </main>  
  

Liege ich hier richtig? Sorry wenn ich vielleicht etwas viel Frage, aber ich will die Seite nicht in ein paar Wochen / Monaten schon wieder neu anfangen. Es wird auch keine Seite für eine Firma sondern für mich privat, ich finde das schlichte Design von der verlinken Seite einfach schön.

Hab mir vor einer Stunde ca. einen Account bei bplaced.net angelegt dass ich etwas zeigen kann was ich hier umsetzte, aber leider sehe ich außer Werbung derzeit nichts :/

Hallo,

sorry ich muss nochmals etwas fragen. Aus dem Quelltext werde ich nicht richtig schlau bzw. verstehe überhaupt nichts.

Auf der Team Seite bzw. auf den Referenzen sieht man es auf der Seite besser gibt es rechts oben zwei kleine Buttons, da kann man zwischen Bilder untereinander / Bilder nebeneinander umschalten. In der URL ändert sich überhaupt nichts. Ein Frame wird auch nicht eingeblendet. Also wird es wohl über CSS oder Javascript umgesetzt.

Daher meine Frage:

• Ist es schwer so ein Effekt umzusetzten und wie wird dieses umgesetzt?