wklejenie obrazka css

Question

Witam

Gdzie jest lepiej trzymać obrazki - w podstronie (Gallery.html) czy w css. Jak w css to jak mogę zrobić aby podstrona Gallery odwoływała się do tych obrazków w css?

Answer 1

W HTML, czyli <img>. W CSS używasz background-image ale jako tło.

I używaj <figure>

<figure>
 <img ... />
 <figcaption>Opis zdjęcia</figcaption>
</figure>

Comments

<img src="galeria2.jpg" class="" width="150" height="150" alt="" />
<img src="galeria2.jpg" class="efekt" width="150" height="150" alt="" />
<img src="galeria2.jpg" class="efekt" width="150" height="150" alt="" />
<img src="galeria2.jpg" class="" width="150" height="150" alt="" />

.efekt:hover {
}

---

Inaczej to zrobiłem: trochę bardziej łopatologicznie

HTML:

<div style="position:absolute;
    top:250px; left:500px;"><img class="lupa" src="galeria2.jpg" width="150" height="150"; alt="1" /></div>
    <figcaption>1</figcaption>

CSS:

.lupa:hover{
transform: scale(2);
-moz-transform:scale(2);
-webkit-transform:scale(2);
-o-transform:scale(2);
}

Działało, a teraz już nie działa (nie powiększa) ;(

---

HTML:

<div style="position:absolute;
    top:250px; left:500px;"><img class="lupa" src="galeria2.jpg" width="150" height="150"; alt="1" /></div>
    <figcaption>1</figcaption>
        
        
    <div style="position:absolute;
    top:250px; left:670px;";><img class="lupa" src="galeria8.jpg" width="150" height="150"; alt="2" /></div>
        <figcaption>1</figcaption>
        
        
    <div style="position:absolute;
    top:250px; left:840px;";><img class="lupa" src="galeria3.jpg" width="150" height="150" alt="3" /></div>
        <figcaption>3</figcaption>
        
    <div style="position:absolute;
    top:250px; left:1010px;";><img class="lupa" src="galeria4.jpg" width="150" height="150" alt="4" /></div>
        <figcaption>4</figcaption>
        
    <div style="position:absolute;
    top:420px; left:500px;";><img class="lupa" src="galeria5.jpg" width="150" height="150" alt="5" /></div>
        <figcaption>5</figcaption>
        
    <div style="position:absolute;
    top:420px; left:670px;";><img class="lupa" src="serwis4.jpg" width="150" height="150" alt="6" /></div>
        <figcaption>6</figcaption>
        
    <div style="position:absolute;
    top:420px; left:840px;";><img class="lupa" src="galeria6.jpg" width="150" height="150" alt="7" /></div>
        <figcaption>7</figcaption>
        
    <div style="position:absolute;
    top:420px; left:1010px;";><img class="lupa"; src="galeria7.jpg" width="150" height="150" alt="8" /></div>
        <figcaption></figcaption>
        
    <div style="position:absolute;
    top:590px; left:500px;";><img class="lupa"; src="galeria10.jpg" width="150" height="150" alt="9" /></div>
        <figcaption></figcaption>
        
     <div style="position:absolute;
    top:590px; left:670px;";><img class="lupa"; src="galeria11.jpg" width="150" height="150" alt="9" /></div>
        <figcaption></figcaption>
    
    <div style="position:absolute;
    top:590px; left:840px;";><img class="lupa"; src="galeria12.jpg" width="150" height="150" alt="9" /></div>
        <figcaption></figcaption>
    <div style="position:absolute;
    top:590px; left:1010px;";><img class="lupa"; src="galeria13.jpg" width="150" height="150" alt="9" /></div>
        <figcaption></figcaption>    
    </figure>
    </justify></p><br></strong>

CSS:

.lupa:hover{
transform: scale(2);
-moz-transform:scale(2);
-webkit-transform:scale(2);
-o-transform:scale(2);
}

{
transform: scale(2.25);
-moz-transform:scale(2.25);
-webkit-transform:scale(2.25);
-o-transform:scale(2.25);

Skasowałem paręnaście linijek kodu i teraz mi nie działa (nie powiększa po najechaniu myszką)

---

Jeszcze raz:

którą linijkę mam wkleić do html a co mam wstawić do css?

1. Obrazek ma się powiększać po najechaniu na niego myszką

2. Mają być ustawione po 4 w jednej linii

Dziękuję

---

Mogę prosić jeszcze raz o wytłumaczenie co gdzie wkleić?

Answer 2

Css służy tylko do zmiany formy prezentacji treści, więc obrazki wstawiasz za pomocą html, a za pomocą css zmieniasz np ich położenie na stronie.