ohne js z.B. so:
HTML-Code:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.wrap {
width: 600px;
height: 150px;
border: 1px solid #ccc;
position: relative;
}
img {
width: 150px;
position: absolute;
right: 0;
top: 0;
}
img:hover {
width: 350px;
transition: width .5s linear;
}
p {
width: 350px;
padding: 10px;
}
</style>
</head>
<body>
<div class="wrap">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui, nostrum, eaque eos repudiandae excepturi iusto voluptatum obcaecati esse numquam fugit dolor eum in non! Quidem fuga nobis iusto possimus consequuntur. Quas, illum, aspernatur labore quidem sit nobis alias similique consequatur.</p>
<img src="http://placehold.it/350x150/0eafff/ffffff.png" alt="" width="350" height="150">
</div>
</body>
</html>