Pozycjonowanie obrazka z position: absolute

0

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ą ;)

0

a jakbyś tekst umieści w oddzielnym divie?

0

W CSS dopisz position: relative; dla #cf3

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0