Wie kann ich animiert Hintergrundbild Größe auf schweben sanft in der css?

Ich habe einen div mit einem Hintergrundbild. Auf schweben, ich will das Bild Einzoomen. Ich habe es die Arbeit (siehe fiddle), aber ich möchte es zu animieren reibungslos über 0,3 Sekunden und gehen Sie dann wieder glatt, anstatt zu springen.

Wie mache ich das?

https://jsfiddle.net/ufgnroor/2/

HTML

                <div class="portfolio-item">

                </div>

CSS

.portfolio-item {
height: 300px;
position: relative;
text-align: center;
cursor: pointer;
margin-bottom: 20px;
background-position: center;
background-size: cover;
background-image: url('http://media4.popsugar-assets.com/files/2014/08/08/878/n/1922507/caef16ec354ca23b_thumb_temp_cover_file32304521407524949.xxxlarge/i/Funny-Cat-GIFs.jpg');
}

.portfolio-item:hover {
background-size: 150%;
-webkit-transition: all 0.3s ease-in-out;
}

InformationsquelleAutor user3589485 | 2016-03-11

  1. 2

    Verwenden, Transformieren, skalieren". Sie müssen einen wrapper zu, so die Bild dosent überlauf

    <div class="wrapper">
    <div class="portfolio-item">
    </div>
</div>

.portfolio-item:hover {
    -webkit-transform: scale(1.5,1.5);
    -webkit-transition: all 0.3s ease-in-out;
}

    Demo

    Das macht die ganze div-scale , ich möchte nur skalieren Sie das Hintergrundbild nach innen, und halten Sie die div die gleiche Größe . So sieht es aus, als ob der Zoom-Funktion in den hintergrund
    ja, ich sah, dass, müssen Sie einfach einen wrapper. sehen udpated Ans. nette Katze übrigens :))

    InformationsquelleAutor Tasos

  2. 0

    Statt mit background-size: 150% Einsatz zu verwandeln. Hier ist ein Beispiel:

    .portfolio-item:hover {
    transform: scale(1.5);
    transition: all 2s ease-in;
    }

    InformationsquelleAutor Barbara Mendes

Schreibe einen Kommentar