Is it possible to have my p tag transition whenever I hover over it? I am looking to create a hover effect on an image that displays text in a div tag with scaling transitions. Can someone assist me with this? Instead of using jQuery or JavaScript to dynamically change the text, I want the transition to occur each time I hover over the image. Below is a snippet of my code:
var tex = ["photoshop", "javascript", "food blog"];
$(document).ready(function() {
var text=$('.box p').text();
$('.one').hover(function() {
$('.box p').text(tex[0].toUpperCase());
$('.box p').transition({ scale: [1.2] });
},function(){
$('.box p').text(text);
});
$('.two').hover(function() {
$('.box p').text(tex[1].toUpperCase());
$('.box p').transition({ scale: [1.2] });
},function(){
$('.box p').text(text);
});
$('.three').hover(function() {
$('.box p').text(tex[2].toUpperCase());
$('.box p').transition({ scale: [1.2] });
},function(){
$('.box p').text(text);
});
});.image:hover {
-webkit-filter: brightness(.5);
filter: brightness(.5);
}
.image img {
height: 200px;
}
* {
margin:0;
padding:0;
}
.box{
width: 180px;
height: 40px;
margin: 100px auto;
background-color: black;
}
.box p {
line-height: 40px;
text-align: center;
font-size: 1.5em;
color: white;
font-family: sans-serif;
font-weight: bold;
transform: scale(0.75);
transition: transform 2s linear;
}
.container {
text-align: center;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="http://ricostacruz.com/jquery.transit/jquery.transit.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<p></p>
</div>
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="one image">
<img src="https://images.unsplash.com/photo-1457464901128-7608dc7561ea?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=8f43ead700f533404bd37bcbb5cfd679&auto=format&fit=crop&w=750&q=80">
</div>
</div>
<div class="col-lg-4">
<div class="two image">
<img src="https://images.unsplash.com/photo-1488590528505-98d2b5aba04b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e3b92161cef01773ab8e0f83d4da1126&auto=format&fit=crop&w=750&q=80">
</div>
</div>
<div class="col-lg-4">
<div class="three image">
<img src="https://images.unsplash.com/photo-1481487196290-c152efe083f5?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=527bc5d7e466efd5ce8a98c311728fbd&auto=format&fit=crop&w=830&q=80">
</div>
</div>
</div>
</div>