Section Col-3 Row-2 Image Hover

Kategori

<section class="sect delta kts-one" style="padding: 0px;">
    @{
        int card86Col = 3;
        int card86Row = 2;
        int card86CategoryOrderNumber = 14;

        if (Partial.isCategoryOrderNumber(card86CategoryOrderNumber))
        {
            IEnumerable<Category>
                card86Category = Partial.CategorySubOrderNumber(card86CategoryOrderNumber, lang);
            Category categoryidno = Partial.Category(card86CategoryOrderNumber, lang);
            int card86Count = Convert.ToInt32(Math.Ceiling(card86Category.Count() / Convert.ToDouble(card86Col)));
            <div class="galeribir">
                @for (int componen = 0; componen < card86Row; componen++)
                {
                    <div class="row" style="margin-left:0px !important; margin-right:0px !important;">
                        @foreach (Category comCategory in card86Category.Skip(componen * card86Row).Take(card86Col))
                        {
                            <div class="col-sm-@(12 / card86Col) bs-nopadding text-center imgholder" style="background-image: url(@comCategory.CategoryImage); padding-left:0px  !important; padding-right:0px !important;">
                                <div class="coverme tip-tablo">
                                    <a class="hucre hucre-ortala" href="@Partial.PostLink(comCategory.CategoryID)">
                                        <h5>@comCategory.CategoryTitle.HtmlEncode()</h5>
                                    </a>
                                </div>
                            </div>
                        }
                    </div>
                }
            </div>
        }
    }
</section>

Makale

<section class="sect delta kts-one" style="padding: 0px;">
    @{
        int card84Col = 3;
        int card84Row = 2;
        int card84CategoryOrderNumber = 2;

        if (Partial.isCategoryOrderNumber(card84CategoryOrderNumber))
        {
            IEnumerable<Post>
            card84Posts = Partial.PostsOrderNumber(card84CategoryOrderNumber, 0, card84Col * card84Row, Partial.Order.OrderBy, true, lang);
            Category categorytitle = Partial.Category(card84CategoryOrderNumber, lang);
            int card84Count = Convert.ToInt32(Math.Ceiling(card84Posts.Count() / Convert.ToDouble(card84Col)));
            <div class="galeribir">
                @for (int componen = 0; componen < card84Row; componen++)
                {
                    <div class="row" style="margin-left:0px !important; margin-right:0px !important;">
                        @foreach (Post comPost in card84Posts.Skip(componen * card84Col).Take(card84Col))
                        {
                            <div class="col-sm-@(12 / card84Col) bs-nopadding text-center imgholder" style="background-image: url(@comPost.PostImage); padding-left:0px  !important; padding-right:0px !important;">
                                <div class="coverme tip-tablo">
                                    <a class="hucre hucre-ortala" href="@Partial.PostLink(comPost.PostID)">
                                        <h5>@comPost.PostTitle.HtmlEncode()</h5>
                                    </a>
                                </div>
                            </div>
                        }
                    </div>
                }
            </div>
        }
    }
</section>

CSS

.delta {
        background-color: #7e924a;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        width: 100%;
        height: 100vh;
        color: #fff;
        display: table;
    }

    .kts-one .galeribir .imgholder {
        height: 50vh !important;
    }

    .kts-one .galeribir .imgholder {
        width: 100%;
        height: 250px;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        border: 1px solid #222;
    }

        .kts-one .galeribir .imgholder .coverme {
            height: 50vh !important;
        }

        .kts-one .galeribir .imgholder .coverme {
            width: 100.4%;
            height: 248px;
            background: rgba(0, 0, 0, .75);
            -moz-transition-duration: .5s;
            -webkit-transition-duration: .5s;
            -o-transition-duration: .5s;
            -ms-transition-duration: .5s;
            transition-duration: .5s;
            opacity: 0;
        }

        .kts-one .galeribir .imgholder:hover .coverme {
            opacity: 1;
        }

    .tip-tablo {
        display: table;
    }

    .kts-one .galeribir .imgholder .coverme a {
        color: #fff;
    }

    .tip-tablo .hucre-ortala {
        vertical-align: middle;
    }

    .tip-tablo .hucre {
        display: table-cell;
    }

http://www.akmproje.com.tr/tr

https://www.alanyaliahsap.com.tr/