Hello! I used the css beo provided in a previous thread. It works great but is there a way to make the expert area wider so that it fits correctly within the image? See link in private area.
#top .aviaccordion-title-on-hover .aviaccordion-preview {
opacity: 1;
filter: alpha(opacity=100);
text-align: center;
}
h3.aviaccordion-title {
position: absolute;
left: 0;
background: rgba(0,0,0,.3);
padding: 10px;
top: 0;
margin: 0;
text-align: left;
}
#top .aviaccordion-preview-title {
display: block;
padding: 0;
}
li.aviaccordion-slide:hover .aviaccordion-excerpt {
opacity: 1;
}
.aviaccordion-excerpt {
opacity: 0;
-webkit-transition: all 0.7s cubic-bezier(0.230, 1.000, 0.320, 1.000);
transition: all 0.7s cubic-bezier(0.230, 1.000, 0.320, 1.000);
padding: 10%;
}
#top .aviaccordion-slide:hover .aviaccordion-excerpt {
background: rgba(0,0,0,.6);
padding: 20px;
display: block;
width: 80%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
#top .aviaccordion-preview-title-wrap {
display: block;
}
#top .aviaccordion-preview-title-wrap {
background: transparent !important;
}
It actually looks like the except text isn’t worrking anymore on hover, can I please get some help with this? Thank you!
Hey!
You can use this CSS to make it wider.
#top .aviaccordion-preview {
width: 70% !important;
}
But it doesn’t look like it’s going to help. You have way too much text in there.
Best regards,
Elliott
Works perfectly because I set the images to be 1500 X 630 :)
Thank you!
please close this thread :)