Efecto Bump Up al pasar el mouse en imagen

Hola un saludo a todos,

Quiero colocarle un efecto a una imagen en mi widget de servicios, quité el icono que trae por defecto y le coloqué una imagen y quiero que al pasar el mouse sobre ella tenga una animación, me gusta esta que se llama "Bump Up" pero la verdad es que no tengo ni la menor idea de como agregar el estilo CSS para que funcione, este es el estilo que debo agregar:

.ejemplo1 img{
border: 5px solid #ccc;
float: left;
margin: 15px;
-webkit-transition: margin 0.5s ease-out;
-moz-transition: margin 0.5s ease-out;
-o-transition: margin 0.5s ease-out;
}
.ejemplo1 img:hover {
margin-top: 2px;
}

<div class="ejemplo1">
<img src="http://lorempixum.com/100/100">
<img src="http://lorempixum.com/100/100">
<img src="http://lorempixum.com/100/100">
<img src="http://lorempixum.com/100/100">
</div>

Mi Blog:
TrendingMedia Venezuela – Gestión de Redes Sociales, Páginas Web, Diseño Gráfico y más.

Para agregar estilos personalizados puedes usar el plugin Simple Custom CSS o alguno similar. Si estás usando Jetpack ya lleva un módulo con esa funcionalidad.

Enrique J Ros dijo:

Para agregar estilos personalizados puedes usar el plugin Simple Custom CSS o alguno similar. Si estás usando Jetpack ya lleva un módulo con esa funcionalidad.

Hacer clic para expandir...

Gracias lo voy a intentar ya ..