شاهد محتوي الصوره متحركه بمرور الماوس برابط

مشاهدات الان السلام عليكم

التطبيق في اضافه اداء الجافا سكربت ورفع ما تحب من صور ومواضيع ويمكنك تكررها اتبع الكود

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
.flip-card {
background-color: transparent;
width: 300px;
height: 300px;
perspective: 1000px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-card-front {
background-color: #bbb;
color: black;
}
.flip-card-back {
background-color: #2980b9;
color: white;
transform: rotateY(180deg);
}
</style>
</head>
<body>

<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4erD-5n2Ca3Bc2zd9Z0yYOMxcqf00XAieiUdNGc9O12DYVDcZsiEaNeR3v90sQQuHwyPqPMG1q2K3203JLUMAS8yB6pTv8MLidGvlEeEJz9VMWs4rOPvhapDau0qkqr0NFdGYTwV8UgCi/s600-Ic42/kuwait_hayef-Hacked-by.gif" alt="شاهد" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>هايف</h1>
<p>نموذج</p>
<p><a href="https://alsafrani.blogspot.com/">تفضل بالضغط</a></p>
</div>
</div>
</div>

</body>

نشاهد المثال الان

https://sfehthayef.blogspot.com/p/blog-page_22.html

التكرار فوق

</body>

واضــــــف

<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="هنا الصورهf" alt="شاهد" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>وضع المحتوي لرساله</h1>
<p>نموذج</p>
<p><a href="https://alsafrani.blogspot.com/">تفضل بالضغط</a></p>
</div>
</div>
</div>

بتغير الصوره والمحتوي

يمكنك تغير اللون والحجم : وغيرها

صاحب المدونه : صفحات هايف

اهلا وسهلا فيكم معنا بالمدونه البسيطه ""

HaYeF صفحات

شاهد محتوي الصوره متحركه بمرور الماوس برابط

صاحب المدونه : صفحات هايف

0 التعليقات :

إرسال تعليق

شاهد محتوي الصوره متحركه بمرور الماوس برابط

صاحب المدونه : صفحات هايف

مواضيع مشابهة

0 التعليقات :

إرسال تعليق