LLIypuk,
вариант...
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body, html{
height: 100%;
}
.content {
width: 200px;
text-align: center;
font-size: 48px;
color: hsla(0, 0%, 100%, 1);
margin: 50px auto;
}
.slide{
border: 1px dashed Gray; padding: 5px; height: 100%; width: 100%;
background-image: url(http://risovach.ru/upload/2014/03/generator/kosmos_45225308_orig_.jpeg);
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: 0% 0%;
transition:all 4000ms ease-out;
}
.slide:hover{
background-position: 20% 30%;
background-size: 120% 130%;
}
</style>
</head>
<body>
<div class="slide"><p class="content">text</p></div>
</body>
</html>