我有一个旋转木马与四个图像三个图像在一个容器中，当悬停在旋转木马图像有一些文字显示，但我想当点击图像图像将弹出一些标题文本。我需要为我的旋转木马部分的文本弹出图像或有人有3旋转木马图像在容器与文本弹出图像请建议。请提前核对谢谢!
#main-carousel {
margin-top: 20px;
text-shadow: 1px 2px 3px #0000001f;
}
#main-carousel h5 {
font-size: 3rem;
font-family: inherit;
font-weight: 300;
-webkit-animation: leftToRight 1s ease-in-out .5s;
animation: leftToRight 1s ease-in-out .5s;
}
#main-carousel h2 {
font-size: 6.6rem;
font-weight: 900;
font-family: inherit;
letter-spacing: 2px;
-webkit-animation: topToBottom 1s linear .3s;
animation: topToBottom 1s linear .3s;
}
#main-carousel .carousel-caption {
right: 15%;
bottom: unset;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
text-align: left;
}
#main-carousel .carousel-control-next,
#main-carousel .carousel-control-prev {
top: 50%;
bottom: unset;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 4%;
font-size: 3.5rem;
background-color: rgba(255, 255, 255, 0.2);
padding: 5px;
-webkit-transition: 5s all;
transition: 5s all;
}
#main-carousel .carousel-control-next {
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
}
#main-carousel .carousel-control-prev {
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
}
#main-carousel .btn-info {
background: transparent;
text-transform: uppercase;
border: 0;
font-family: "helveticaregular";
font-size: 1.8rem;
position: relative;
padding: 20px 0 0;
margin: 20px 0 0;
}
#main-carousel .btn-info::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 63px;
height: 5px;
background-color: #fff;
}
/* home blog slider */
.tile{
width:100%;
height:370px;
background-color:#000000;
display:inline-block;
background-size:cover;
position:relative;
cursor:pointer;
transition: all 0.4s ease-out;
box-shadow: 0px 35px 77px -17px rgba(0,0,0,0.44);
overflow:hidden;
color:white;
font-family: 'Open Sans';
}
.tile img{
height:100%;
width:100%;
position:absolute;
top:0;
left:0;
z-index:0;
transition: all 0.4s ease-out;
}
.tile .text{
/* z-index:99; */
position:absolute;
padding:30px;
height:calc(100% - 0px);
background-color: rgb(0 0 0 / 25%);
}
.tile h3{
font-weight:600;
margin:0;
text-shadow: 2px 2px 10px rgba(0,0,0,0.3);
color:#ffffff;
font-size:20px;
font-family: 'Open Sans';
}
.tile h4{
font-weight:100;
margin:20px 0 0 0;
font-style:italic;
transform: translateX(200px);
}
.tile p{
font-weight:100;
margin:20px 0 0 0;
line-height: 22px;
transform: translateX(-200px);
transition-delay: 0.2s;
color:#ffffff;
font-family: 'Open Sans';
padding-top:10%;
font-size:14px;
text-align:left;
}
.animate-text{
opacity:0;
transition: all 0.6s ease-in-out;
}
.tile:hover{
/* background-color:#99aeff; */
box-shadow: 0px 35px 77px -17px rgba(0,0,0,0.64);
transform:scale(1.05);
}
.tile:hover img{
opacity: 0.2;
}
.tile:hover .animate-text{
transform:translateX(0);
opacity:1;
}
.tile:hover span
{
opacity:1;
transform:translateY(0px);
}<div class="container">
<div class="blog--slider-wrap blog--slider-main common-slider">
<div class="blog-box">
<div class="tile">
<img src="images/image-1.jpg">
<div class="text">
<p class="animate-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
</div>
</div>
</div>
<div class="blog-box">
<a class="popup-youtube" href="https://www.youtube.com">
<img src="images/play-button.png" class="video-gallery">
</a>
<div class="tile">
<img src="images/image-2.jpg">
</div>
</div>
<div class="blog-box">
<div class="tile">
<img src="images/image-3.jpg">
<div class="text">
<p class="animate-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
</div>
</div>
</div>
<div class="blog-box">
<a class="popup-youtube" href="https://www.youtube.com">
<img src="images/play-button.png" class="video-gallery">
</a>
<div class="tile">
<img src="images/image-4.jpg">
</div>
</div>
</div>这段代码应该可以工作，并检查div.content"它将获得旋转木马的背景。
$('.blog-box').on('click', function(){
var image = $(this).find('img').attr('src');
var text = $(this).find('p').text();
$('#modal .content').css('background-image', 'url(' + image + ')');
$('#modal p.carousel-text').text(text);
$('#modal').show();
});
$('.close-modal').on('click', function(){
$('#modal').hide();
});#main-carousel {
margin-top: 20px;
text-shadow: 1px 2px 3px #0000001f;
}
#main-carousel h5 {
font-size: 3rem;
font-family: inherit;
font-weight: 300;
-webkit-animation: leftToRight 1s ease-in-out .5s;
animation: leftToRight 1s ease-in-out .5s;
}
#main-carousel h2 {
font-size: 6.6rem;
font-weight: 900;
font-family: inherit;
letter-spacing: 2px;
-webkit-animation: topToBottom 1s linear .3s;
animation: topToBottom 1s linear .3s;
}
#main-carousel .carousel-caption {
right: 15%;
bottom: unset;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
text-align: left;
}
#main-carousel .carousel-control-next,
#main-carousel .carousel-control-prev {
top: 50%;
bottom: unset;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 4%;
font-size: 3.5rem;
background-color: rgba(255, 255, 255, 0.2);
padding: 5px;
-webkit-transition: 5s all;
transition: 5s all;
}
#main-carousel .carousel-control-next {
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
}
#main-carousel .carousel-control-prev {
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
}
#main-carousel .btn-info {
background: transparent;
text-transform: uppercase;
border: 0;
font-family: "helveticaregular";
font-size: 1.8rem;
position: relative;
padding: 20px 0 0;
margin: 20px 0 0;
}
#main-carousel .btn-info::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 63px;
height: 5px;
background-color: #fff;
}
/* home blog slider */
.tile{
width:100%;
height:370px;
background-color:#000000;
display:inline-block;
background-size:cover;
position:relative;
cursor:pointer;
transition: all 0.4s ease-out;
box-shadow: 0px 35px 77px -17px rgba(0,0,0,0.44);
overflow:hidden;
color:white;
font-family: 'Open Sans';
}
.tile img{
height:100%;
width:100%;
position:absolute;
top:0;
left:0;
z-index:0;
transition: all 0.4s ease-out;
}
.tile .text{
/* z-index:99; */
position:absolute;
padding:30px;
height:calc(100% - 0px);
background-color: rgb(0 0 0 / 25%);
}
.tile h3{
font-weight:600;
margin:0;
text-shadow: 2px 2px 10px rgba(0,0,0,0.3);
color:#ffffff;
font-size:20px;
font-family: 'Open Sans';
}
.tile h4{
font-weight:100;
margin:20px 0 0 0;
font-style:italic;
transform: translateX(200px);
}
.tile p{
font-weight:100;
margin:20px 0 0 0;
line-height: 22px;
transform: translateX(-200px);
transition-delay: 0.2s;
color:#ffffff;
font-family: 'Open Sans';
padding-top:10%;
font-size:14px;
text-align:left;
}
.animate-text{
opacity:0;
transition: all 0.6s ease-in-out;
}
.tile:hover{
/* background-color:#99aeff; */
box-shadow: 0px 35px 77px -17px rgba(0,0,0,0.64);
transform:scale(1.05);
}
.tile:hover img{
opacity: 0.2;
}
.tile:hover .animate-text{
transform:translateX(0);
opacity:1;
}
.tile:hover span
{
opacity:1;
transform:translateY(0px);
}
#modal {
display:none;
height: 100%;
width: 100%;
position:absolute;
top:0;
left: 0px;
background-color:red;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="blog--slider-wrap blog--slider-main common-slider">
<div class="blog-box">
<div class="tile">
<img src="images/image-1.jpg">
<div class="text">
<p class="animate-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
</div>
</div>
</div>
<div class="blog-box">
<a class="popup-youtube" href="https://www.youtube.com">
<img src="images/play-button.png" class="video-gallery">
</a>
<div class="tile">
<img src="images/image-2.jpg">
</div>
</div>
<div class="blog-box">
<div class="tile">
<img src="images/image-3.jpg">
<div class="text">
<p class="animate-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
</div>
</div>
</div>
<div class="blog-box">
<a class="popup-youtube" href="https://www.youtube.com">
<img src="images/play-button.png" class="video-gallery">
</a>
<div class="tile">
<img src="images/image-4.jpg">
</div>
</div>
</div>
<div id="modal">
<div class="content">
<p class="carousel-text"></p>
<span class="close-modal">Close Modal</span>
</div>
</div>