JSFiddle - React, Tailwind, and code Playground

by Alexander Startsev

HTML

<div class="photo"><span>Изменение background-size у контейнера</span></div>
<div class="photo-2">
    <img src="//demo.templaza.com/j/nicanian2_intro/img/dark_bg.jpg" alt="" />
    <span>Изменение размера img при наведении курсора на контейнер</span>
    </div>
<div class="photo-3">
    <img src="//demo.templaza.com/j/nicanian2_intro/img/dark_bg.jpg" alt="" />
    <span>Изменение размера img с помощью jQuery</span>
</div>

CSS

span{
    position: absolute;
    padding: 5px 7px;
    font: 11px/14px normal Arial, sans-serif;
    background: rgba(0,0,0,.5);
    color: #FFF;
    bottom: 10px;
    right: 10px;
    border-radius: 5px;
}

.photo,
.photo-2,
.photo-3{
    height: 500px;
    margin-bottom: 20px;
    box-shadow: 0 10px 20px -10px rgba(0,0,0,.9);
    overflow: hidden;
    position: relative;
    -webkit-transition: all .2s linear;
    -moz-transition: all .2s linear;
    -ms-transition: all .2s linear;
    -o-transition: all .2s linear;
    transition: all .2s linear;
}

.photo{
    background: url(//demo.templaza.com/j/nicanian2_intro/img/dark_bg.jpg) no-repeat 50% 0 transparent;
    background-size: 130%;
}

.photo:hover{
    background-size: 160%;
}

.photo-2 img,
.photo-3 img{
    width: 130%;
}

.photo-2 img{
    -webkit-transition: all .2s linear;
    -moz-transition: all .2s linear;
    -ms-transition: all .2s linear;
    -o-transition: all .2s linear;
    transition: all .2s linear;
}

.photo-2:hover img{
    width: 150%;
}

JavaScript

$(function(){
    $('.photo-3').hover(function(){
        $(this).find('img').animate({"width":"150%"}, 200);
    }, function(){
        $(this).find('img').animate({"width":"130%"}, 200);
    });
});