Помогите поправить эффект при наведении на картинку, чтобы всплывающая подсказка выскакивала выше картинки
/*
- JUX Logo Showcase
*/
.jux_logo_item .logo_item_title {
text-align: center;
padding: 20px 20px 30px;
display: block;
position: relative;
font-weight: bold;
font-size: 15px;
}
.jux_logo_item .jux_logo_item_info {
text-align: center;
}
.jux_logo_item .jux_logo_item_info img {
width: 100%;
}
.jux_logo_item:hover {
z-index: 1111;
position: relative;
}
.logo_showcase_grid {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.logo_showcase_slider {
text-align: center;
}
.logo_showcase_slider .jux_logo_item.has-tooltip {
display: inline;
position: relative;
text-align: center;
}
.logo_showcase_slider .jux_logo_item.has-tooltip:hover:after {
opacity: 1;
top: 15px;
}
.logo_showcase_slider .jux_logo_item.has-tooltip:after {
top: -20px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.logo_showcase_slider.top.owl-loaded .owl-stage {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.logo_showcase_slider.middle.owl-loaded .owl-stage {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.logo_showcase_slider.bottom.owl-loaded .owl-stage {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.jux_logo_item.has-tooltip {
display: inline;
position: relative;
text-align: center;
}
.jux_logo_item.has-tooltip:hover:after {
opacity: 1;
top: -10px;
}
.jux_logo_item.has-tooltip:after {
background: #444;
color: #fff;
content: attr(title);
position: absolute;
top: 0;
padding: 7px 10px;
border-radius: 7px;
font-size: 13px;
text-align: center;
top: -30px;
-webkit-transform: translate3d(-50%, -100%, 0);
transform: translate3d(-50%, -100%, 0);
opacity: 0;
-webkit-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
.owl-carousel.owl-loaded .owl-stage {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.owl-carousel.owl-loaded .owl-nav .disabled {
opacity: 0;
}
.owl-carousel.owl-loaded .owl-item .loop-item-company img {
display: inline-block;
max-width: 100px;
}
.owl-carousel.owl-loaded .owl-dots {
text-align: center;
margin-top: 10px;
}
.owl-carousel.owl-loaded .owl-dots .owl-dot {
display: inline-block;
margin-left: 5px;
margin-right: 5px;
outline: 0;
border: none;
}
.owl-carousel.owl-loaded .owl-dots .owl-dot.active span,
.owl-carousel.owl-loaded .owl-dots .owl-dot:hover span {
opacity: 1;
-webkit-transform: scale3d(1.2, 1.2, 1.2);
transform: scale3d(1.2, 1.2, 1.2);
background-color: #656565;
}
.owl-carousel.owl-loaded .owl-dots .owl-dot span {
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
opacity: 0.2;
background-color: #656565;
display: block;
margin: 4px;
width: 8px;
height: 8px;
border-radius: 50%;
}
.owl-carousel.owl-loaded div.owl-nav {
text-align: center;
}
.owl-carousel.owl-loaded div.owl-nav button.owl-prev,
.owl-carousel.owl-loaded div.owl-nav button.owl-next {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
font-size: 48px;
color: #bbbbbb;
-webkit-transition: all ease-in-out 0.3s;
transition: all ease-in-out 0.3s;
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
z-index: 99;
}
.owl-carousel.owl-loaded div.owl-nav button.owl-prev:hover,
.owl-carousel.owl-loaded div.owl-nav button.owl-next:hover {
color: #656565;
}
.owl-carousel.owl-loaded div.owl-nav button.owl-prev {
left: -20px;
}
.owl-carousel.owl-loaded div.owl-nav button.owl-next {
right: -20px;
/*
- JUX Logo Showcase
*/
.jux_logo_item {
.logo_item_title {
text-align: center;
padding: 20px 20px 30px;
display: block;
position: relative;
font-weight: bold;
font-size: 15px;
}
.jux_logo_item_info {
text-align: center;
img {
width: 100%;
}
}
&:hover {
z-index: 1111;
position: relative;
}
}
.logo_showcase_grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.logo_showcase_slider {
text-align: center;
.jux_logo_item.has-tooltip {
display: inline;
position: relative;
text-align: center;
&:hover {
&:after {
opacity: 1;
top: 15px;
}
}
}
.jux_logo_item.has-tooltip:after {
top: -20px;
transform: translateX(-50%);
}
&.top.owl-loaded {
.owl-stage {
align-items: flex-start;
}
}
&.middle.owl-loaded {
.owl-stage {
align-items: center;
}
}
&.bottom.owl-loaded {
.owl-stage {
align-items: flex-end;
}
}
}
.jux_logo_item.has-tooltip {
display: inline;
position: relative;
text-align: center;
&:hover {
&:after {
opacity: 1;
top: -10px;
}
}
}
.jux_logo_item.has-tooltip:after {
background: #444;
color: #fff;
content: attr(title);
position: absolute;
top: 0;
padding: 7px 10px;
border-radius: 7px;
font-size: 13px;
text-align: center;
top: -30px;
transform: translate3d(-50%, -100%, 0);
opacity: 0;
transition: all 300ms ease-in-out;
}
.owl-carousel.owl-loaded {
.owl-stage {
display: flex;
align-items: center;
}
.owl-nav .disabled {
opacity: 0;
}
.owl-item {
.loop-item-company {
img {
display: inline-block;
max-width: 100px;
}
}
}
.owl-dots {
text-align: center;
margin-top: 10px;
.owl-dot {
display: inline-block;
margin-left: 5px;
margin-right: 5px;
outline: 0;
border: none;
&.active,
&:hover {
span {
opacity: 1;
transform: scale3d(1.2, 1.2, 1.2);
background-color: #656565;
}
}
span {
transition: all 300ms ease;
opacity: 0.2;
background-color: #656565;
display: block;
margin: 4px;
width: 8px;
height: 8px;
border-radius: 50%;
}
}
}
div.owl-nav {
text-align: center;
button {
&.owl-prev,
&.owl-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 48px;
color: #bbbbbb;
transition: all ease-in-out .3s;
transition-delay: .2s;
z-index: 99;
&:hover {
color: #656565;
}
}
&.owl-prev {
left: -20px;
}
&.owl-next {
right: -20px;
}
}
}
}