Galeria con efectos hover

Hola!
Quiero hacer una galeria con efectos hover y he encontrado una plantilla con todo el código css y html pero pensada para blogger asi que no me funciona del todo en el wordpress.
Aquí el css:

ul#galeria{
width:100%;
margin:10px 5px;
padding:0;}

ul#galeria li{
margin:0 10px 10px 0; /*separación de cada elemento 10px a la derecha y 10px abajo*/
padding:0;
float:left;
list-style:none;}

ul#galeria a{
width:200px; /*deberá tener el mismo ancho de la imagen*/
height:160px;  /*deberá tener el mismo alto de la imagen*/
display:block;
position:relative;
top:0;
left:0;
margin:0;
padding:0;
font-size:14px;
color:#fff;
text-align:center;
white-space:nowrap;
}
ul#galeria li img{
width:200px; /*Ancho de la imagen*/
height:160px; /*Alto de la imagen*/
margin:0;
padding:0;
border:none;}

ul#galeria span{/*Estilos del titulo de la imagen*/
width:200px;
left:0;
bottom:0;
margin:0;
padding:4px 0;
background:#0A1B2A; /*El color de fondo del titulo*/
opacity:.7;
filter:alpha(opacity=70);
cursor:pointer;
position:absolute;
overflow:hidden;
z-index:10;}

.zoom { z-index:9;-webkit-transition:all .25s ease-out;-moz-transition:all .25s ease-out;-o-transition: all .25s ease-out; transition: all .25s ease-out;}.sec_zoom { z-index:9; overflow:hidden;}.zoom:hover {-moz-transform: scale(2);-webkit-transform: scale(2);-o-transform: scale(2); -ms-transform: scale(2);transform: scale(2);}

Y el html…

<ul id="galeria"><li class="sec_zoom"><a href="#" title=""><img class="zoom" alt="" src="URL_de_la_imagen" /><span style="border:0;">Texto del titulo o leyenda</span></a></li>

Que debería cambiar? Muchas gracias!