Witam,
Na codzień jestem programistą backendowym, ale złapałem indywidualne zlecenie i potrzebuje pomocy z wypozycjonowaniem obrazka, który co kilka sekund przechodzi w drugi obrazek.
Znalazłem fajny tutorial:
http://css3.bradshawenterprises.com/cfimg/
Dokładnie chodzi mi o DEMO nr 3:
Demo 3 - One image to another with a timer (CSS animations)
Odwzorowanie tego pomysłu wyszło mi bez problemu, ale nie potrafię wypozycjonować tego obrazka tak jakbym chciał.
Problem polega na tym, że ten obrazek w CSS ma position: absolute.
To co chciałbym zrobić to:
<div class="background">
<div class="container">
<div id="cf3" class="col-md-12 shadow">
<img class="bottom" src="~/Content/Images/Website/CeilingPage/mainPhoto-black-white.png">
<img class="top" src="~/Content/Images/Website/mainPhoto.png">
</div>
TUTAJ CHCE UMIEŚCIĆ TEKST (POD OBRAZKIEM)
</div>
</div>
.background{
padding: 60px;
background-color: #ecebe7;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
Niestety tekst nachodzi na obrazek, z tego względu, że ten obrazek jest w pozycji absolute...
Ostateczne rozwiązanie jakie potrzebuje to:
Mam tło, na tle jest obrazek z efektem jak w linku DEMO nr 3, pod obrazkiem jest tekst.
Sztywne marginesy itd. odpadają ;)