<section>
<button>toggle image size</button>
<div class="user">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/652/ada-small.jpeg">
<h3>Ada Lovelace</h3>
<a href="#">Account</a>
<a href="#">Change Password</a>
<a href="#">Log Out</a>
</div>
</section>
body {
background-color: #1D1F1F;
font-family: 'Source Sans Pro', sans-serif;
}
section {
width: 400px;
margin: 0 auto;
}
.user {
width: 400px;
height: 165px;
margin: 2em 0;
border: 3px solid #E18728;
border-radius: 10px;
background-color: white;
}
img {
padding: .5em;
float: left;
}
a { display: block; }
$('button').on('click', function() {
if ($('img').attr('src').indexOf('wide') > -1) {
$('img').attr('src', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/652/ada-small.jpeg');
} else {
$('img').attr('src', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/652/ada-wide.jpeg');
}
});
This Pen doesn't use any external CSS resources.