Scribd
Upload
19 views3 pages

Repeater

The document contains CSS code for styling item cards with two states - a front and back side that can be toggled on hover. It positions and styles elements like backgrounds, dates, text, icons and links for the card components.

Uploaded by

Soltan Alkhatib
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
19 views3 pages

Repeater

The document contains CSS code for styling item cards with two states - a front and back side that can be toggled on hover. It positions and styles elements like backgrounds, dates, text, icons and links for the card components.

Uploaded by

Soltan Alkhatib
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

.

item-card {
position: relative;
width: 350px;
height: 250px;
}

.bg {
position: absolute;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.3);
box-shadow: 0 4px 20px 0 rgba(31, 38, 135, 0.12);
border-radius: 15px;
display: flex;
justify-content: center;
align-items: center;
}

.front {
opacity: 1;
transition: height 1s, opacity 0.5s ease;
}

.front .image {
opacity: 0.1;
}

.front .date {
position: absolute;
width: 75%;
top: 8px;
text-overflow: ellipsis;
font-size: 1.6em;
}

.front .text {
position: absolute;
top: 85px;
left: 10px;
right: 10px;
text-align: center;
font-size: 1.5em;
}

.back {
height: 0%;
opacity: 0;
transition: height 1s, opacity 0.5s ease;
bottom: 0px;
}

.back .icons {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
bottom: 5px;
}
.back .icons a {
text-decoration: none;
padding: 20px;
}

.back .icons a:hover {


z-index: 1;
}

.back .icons img {


width: 60px;
height: 60px;
}

.back .icons img:hover {


transform: translate3d(0px, -10px, 50px);
transition: transform 0.5s;
}

.back .icons a .shadow {


width: 30px;
height: 25px;
position: absolute;
background: #000;
filter: blur(20px);
z-index: -1;
transform: translate3d(22px, -47px, 50px) rotateX(40deg);
opacity: 0;
}

.back .icons a:hover .shadow {


z-index: 1;
opacity: 1;
transform: translate3d(15px, 3px, 50px) rotateX(0deg);
transition: transform 0.5s, opacity 0.5s, z-index 0.5s;
}

.item-card:hover .back {
height: 100%;
opacity: 1;
transition: height 1s, opacity 0.5s ease;
}

.item-card:hover .front {
height: 0%;
opacity: 0;
transition: height 1s, opacity 0.5s ease;
}

<%--Repeater--%>
<div class="row">
<asp:Repeater ID="ClassRepeater" runat="server"
DataSourceID="sdsClassInfo">
<ItemTemplate>
<div class="col-4 mb-3">
<div class="item-card">
<div class="front bg">

<div class="image">
<img
src="../../Content/images/Student/icons8-classroom.png" />
<%--<asp:Image runat="server"
ID="Img_Icon" CssClass="img-thumbnail" ImageUrl="" Style="max-height: 300px;" />--
%>
</div>
<div class="date"><%#
Eval("TimeFrom", "{0:T}") %> - <%# Eval("TimeTo", "{0:T}") %></div>
<div class="text">
<%# Eval("CourseName") %>
</div>
</div>

<div class="back bg">


<div class="icons">
<a href='<%#
Eval("Id_Class","ClassDetails.aspx?Id_Class={0}") %>' class="text-success">Class
Details </a>
<asp:LinkButton ID="Lb_Archive"
CssClass="text-muted" runat="server" CausesValidation="False" CommandName="Delete"
Visible='<%# (bool)Eval("IsPaid")==false %>'><i class="icon-line2-drawer"></i> Pay
</asp:LinkButton>
</div>
</div>
</div>
</div>
</ItemTemplate>
<FooterTemplate>
<asp:Label ID="defaultItem" runat="server"
Visible='<%# ClassRepeater.Items.Count == 0
%>' Text="Zero Classes" />
</FooterTemplate>
</asp:Repeater>
</div>

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy