I'm trying to add the onmouseover function to the image of Angelina Jolie in order to change the text above, which currently says "Your Daily Dose of Contrabang". What is the best way to achieve this? Thank you for your assistance. You can check out the JSFIDDLE http://jsfiddle.net/cntra/VSCXy/ or refer to the code below:
<div class="columa">
<div id="text-display">
<span>Your Daily Dose of Contrabang</span>
</div>
<div class="morphing-tinting">
<span class="image-wrap"
style="position:relative;
left: 0px; top:0;
display:inline-block;
background:url
(http://www.howmuchdotheyweigh.com/wp-content/uploads/2011/02/angelina-jolie.jpg)
no-repeat center center;
width: 250px;
height: 250px;">
The CSS:
#text-display{
top:; position: relative;
display:inline-block; padding:5px 10px;
font-family: sans-serif; font-weight:bold; font-size:50px;
color: white; text-align: center; line-height: 1.2em; margin:0px;
background-color:#E94F78;}
.morphing-tinting .image-wrap {
position: absolute;
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
-webkit-border-radius: 30em;
-moz-border-radius: 30em;
border-radius: 30em;}
.morphing-tinting .image-wrap:hover {
-webkit-border-radius: 30em;
-moz-border-radius: 30em;
border-radius: 30em;}