The "Hikayen Gülümsemen" text is when scrolling, the text stays behind the background and is not visible.
<div class="dsn-root-slider" id="dsn-hero-parallax-img" style="background-color:black;">
<div class="slide-inner">
<div class="wrapper">
<div class="slide-content">
<div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="carousel-item active" style="background-image:url(Content/assets/Images/bg/pianoDentalClinic_slide1-1.jpg)">
<div class="containerx">
<div class="title-text-header">
<div class="title-text-header-inner" style="font-weight:500; color:white;">
<a href="#" class="effect-ajax sloganBg" data-dsn-ajax="slider" style="color:white !important;">
@("Hikayen".ToGecerliDileCevir()) @("Gülümsemen".ToGecerliDileCevir())
</a>
</div>
</div>
<div class="link-custom">
<a href="@Url.Action("Ekle", "Randevu", new { area = "Kayit" })" class="image-zoom " data-dsn="parallax" style="background-color: transparent; border: 1px solid rgba(112, 112, 112, 0.5);"
data-dsn-ajax="slider">
<span>@("RANDEVU İÇİN TIKLAYINIZ".ToGecerliDileCevir()).</span>
</a>
</div>
</div>
</div>
<div class="carousel-item item" style="background-image:url(Content/assets/Images/bg/pianoDentalClinic_slide2.jpg)">
<div class="containerx">
<div class="title-text-header">
<div class="title-text-header-inner">
<a href="#" class="effect-ajax sloganBg" data-dsn-ajax="slider" style="color:white !important;">
@("Hikayen".ToGecerliDileCevir()) @("Gülümsemen".ToGecerliDileCevir())
</a>
</div>
</div>
<div class="link-custom">
<a href="@Url.Action("Ekle", "Randevu", new { area = "Kayit" })" class="image-zoom " data-dsn="parallax" style="background-color: transparent; border: 1px solid rgba(112, 112, 112, 0.5);"
data-dsn-ajax="slider">
<span>@("RANDEVU İÇİN TIKLAYINIZ".ToGecerliDileCevir()).</span>
</a>
</div>
</div>
</div>
</div>
<!-- Left and right controls -->
<div class="slider-arrow-left">
<a class="carousel-control-prev" href="#myCarousel" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
</div>
<div class="slider-arrow-right">
<a class="carousel-control-next" href="#myCarousel" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="dsn-slider-content"></div>
<style>
.carousel-item {
height: 70rem;
background-color: black;
position: relative;
color: black;
background-position: center;
background-size: cover;
}
.containerx {
margin-left: -121px !important;
margin-top: 400px !important;
position:fixed;
z-index:-2;
}
a:hover{
text-decoration:none !important;
color:black !important;
}
/* a:hover {
text-decoration:none !important;
}*/
a{
text-decoration:none !important;
}
.v-light .dsn-slider .wrapper {
background-color: #090909;
}
a{
color:white !important;
}
body {
color: rgba(255, 255, 255, 0.69) !important;
font-weight: 500 !important;
font-family: "Montserrat", sans-serif;
}
.main-root{
background-color:black;
}
h3{
font-weight:700;
font-size:35px;
line-height:1.2;
}
@@media(min-width:1200px) {
.container {
max-width: 1140px;
}
}
</style>i tried so hard please can you help me?
When the scroll is made or the transform is changed, the text should remain fixed, but a part of it does not appear. With Position fixed, the entire text is visible without scrolling when the page is fixed, but not when scrolling.
2
Answers
when dsn-root-slider transform changed text not showing
There isn’t enough information here for me to be sure how to fix it, but you could try using a z-index to manipulate the natural stacking order.