HTML:
<div class="container">
<article class="caption">
<svg class="grid-point" width="100" height="100" style="height: 120px; width: 625px;">
<circle class="myPoint" cx="50" cy="50" r="5" fill="#80E1EE" />
</svg>
<img class="caption__media" src="http://farm7.staticflickr.com/6088/6128773012_bd09c0bb4e_z_d.jpg" />
<div class="caption__overlay">
<h1 class="caption__overlay__title">Alaska</h1>
<p class="caption__overlay__content">
text
</p>
</div>
</article>
</div>
CSS:
body {
font: normal 16px/1.5 Arial, sans-serif;
}
h1, p {
margin: 0;
padding: 0 0 .5em;
}
.container {
margin: 0 auto;
max-width: 480px;
}
.caption {
position: relative;
overflow: hidden;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.caption::before {
content: ' ';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent;
transition: background .35s ease-out;
}
/* This works with css when i am hovering on caption class.
.caption:hover::before {
background-color: rgba(0, 0, 0, .5);
}
*/
.caption__media {
display: block;
min-width: 100%;
max-width: 100%;
height: auto;
}
.caption__overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 10px;
color: white;
-webkit-transform: translateY(100%);
transform: translateY(100%);
transition: -webkit-transform .35s ease-out;
transition: transform .35s ease-out;
}
.caption:hover .caption__overlay {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.caption__overlay__title {
-webkit-transform: translateY( -webkit-calc(-100% - 10px) );
transform: translateY( calc(-100% - 10px) );
transition: -webkit-transform .35s ease-out;
transition: transform .35s ease-out;
}
.caption:hover .caption__overlay__title {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.grid-point {
position: absolute;
z-index: 99999;
}
jQuery:
$(document).ready(function() {
$(".myPoint").hover(function() {
// I am attempting here to use jQuery to create the same effect but when the circle is hovered and not the caption class
$('.caption').css({backgroundColor: "rgba(0, 0, 0, .5)");
});
});
Here in my CSS code, I have commented out some lines that work when the article caption class is hovered over, causing it to get an overlay. Now, I want to achieve a similar result using jQuery, but this time the overlay should occur when the SVG circle is hovered over instead of the article caption class. However, my current jQuery function is not working as expected. What steps should I take to achieve the desired result?