Middle Section and 4 Box IE + OPERA

index.cshtml

<div class="container-fluid odul" style="background-repeat:repeat-x; background-position:top center;background: rgb(12,45,86);background: linear-gradient(135deg, rgba(12,45,86,1) 0%, rgba(136,10,22,1) 100%);background-size:cover;padding-bottom:50px;padding-top: 50px;">
    <div class="container">
        <div class="row">
            <div class="col-md-6 text-center">
                <div class="d-block d-sm-none"><img src="/Upload/File/2020/1/20/odul21.png"></div>
                <div class="d-none d-sm-block" style="color:white;position:absolute;bottom: 80px;padding-bottom:20px;padding-right:25px;"><img src="/Upload/File/2020/1/20/odul21.png"></div>
                <div class="video-text-link" style="color:white;position:absolute;bottom:0;padding-bottom:20px;padding-right:25px;">
                    <p>Türkiye'nin en iyi Teknokentleri arasında vizyonu ve misyonu ile farklı bir yere sahip olmak için var gücümüzle çalışmaya devam ediyor ve her alanda başarılı olma iddiamızı sürdürüyoruz.</p>
                    <a href="" style="color:white;background-color:#0077a2;padding:10px 25px;">Videoyu İzle</a>
                </div>
            </div>

            @{
                int card36Col = 2;
                int card36TotalRow = 2;
                int card36CategoryOrderNumber = 2;

                if (Partial.isCategoryOrderNumber(card36CategoryOrderNumber))
                {
                    IEnumerable<Post>
                    card36Posts = Partial.PostsOrderNumber(card36CategoryOrderNumber, 0, card36Col * card36TotalRow, Partial.Order.OrderBy, true, lang);
                    Category category36title = Partial.Category(card36CategoryOrderNumber, lang);
                    int card36Count = Convert.ToInt32(Math.Ceiling(card36Posts.Count() / Convert.ToDouble(card36Col)));
                    <div class="col-md-6" style="margin-top:30px;margin-bottom:10px;">
                        <div class="row">
                            <div class="col-md-12 text-right">
                                <div class="big-title3 text-center">
                                    <h3 class="big_title3_beyaz" style="color:white;">@category36title.CategoryTitle.HtmlEncode()</h3>
                                </div>
                            </div>
                        </div>
                        @for (int componen = 0; componen < card36Count; componen++)
                        {
                            <div class="row">
                                @foreach (Post comPost in card36Posts.Skip(componen * card36Col).Take(card36Col))
                                {
                                    <div class="col-md-6 col-sm-6 col-xs-12">
                                        <div class="kutu">
                                            <div class="news-div">
                                                <a href="@Partial.PostLink(comPost.PostID)">
                                                    <div class="news-images" style="background-image: url(@comPost.PostThumbnail)">

                                                    </div>
                                                    <h2><span>@comPost.PostTitle.HtmlEncode()</span></h2>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                }
                            </div>
                        }
                    </div>
                    <div class="col-md-12 text-right">
                        <span style="color:white; bottom:0px; margin-right:0px;"><h4 style="font-size:16px;"><a href="@Partial.CategoryLink(card36CategoryOrderNumber)" style="color:white;">+ Tüm Duyurular</a></h4> </span>
                    </div>

                }
            }
        </div>
    </div>
</div>

CSS

a {
    text-decoration: none;
    transition: all 0.3s ease-in-out;
    position: relative;
}
div.kutu {
    margin-bottom: 20px !important;
}
.news-div {
    overflow: hidden;
    position: relative;
}
.news-div a {
    display: block;
}
.news-div h2 {
    border-radius: 0px 0px 3px 3px;
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;
    background: rgba(0, 0, 0, 0.75);
    padding: 6px 9px;
    color: white;
    margin: auto;
    font: 18px Sans-Serif;
    line-height: 1.4;
    height: 100%;
}
 
.news-div h2 span {
    position: absolute;
    bottom: 13px;
    font-size: 19px;
}


.news-images {
    width: 100%;
    min-height: 200px;
    max-height: 200px;
    overflow: hidden;
    border-radius: 3px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-position: 50% 50%;
    transition: background-size .2s;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
} 

www.antalyateknokent.com.tr