Beitrag Animieren lassen


#1
Hallo Leute, habe zufällig ein Thmes bzw. Template gesehn hier oder hier und hier,

ganz oben bei intro beiträgen sieht man Titel, wenn man mit mas berührt erscheint auch Text,
hier glaube ist auch javascript in einsatz, wie kann man so was realiesieren nur mit html und css,
kennt jeman ein sollche fertige script, oder wie nennt man diese animation um zum googlen,

ich bedanke mich im voraus, viele Grüße Guri.
 
Zuletzt bearbeitet:

basti1012

Erfahrenes Mitglied
#2
eine genauere beschreibung was du genau meinst wäre schon besser. Du hast jetzt 3 Seiten verlinkt und ich weiß nicht von welcher Seitedu was als Intro Beitrag siehst.

Hast du schon mal bei den in Quelltext gekuckt wie die das gemacht haben ?
 
#3
Servus, ich denke habe es geschaft, hier:

HTML:
<html>
<head>

<style>
.con {
  background: red;
  overflow: hidden;
  position: relative;
  height: 300px;
  width: 500px;
}
.box {
  position: absolute;
  bottom: 0;
}
.ani {
  max-height: 0px;
  transition: all 0.5s ease-in-out;
}
.title {
  background: orange;
}
.text {
  background: yellow;
}
.more {
  background: gold;
}
.con:hover .ani {
  max-height: 300px;
}
</style>

</head>
<body>

<div class="con">
<div class="box">
  <div class="title">Title: Lorem ipsum dolor sit amet</div>
  <div class="ani">
    <div class="text">Text: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
    <div class="more">More: consetetur sadipscing elitr</div>
  </div>
</div>
</div>

</body>
</html>
vieleich hat jemand ein besseres lösung, Servus.
 
Zuletzt bearbeitet:

Neue Beiträge