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

بواسطه :صفحات هايف -
0

التطبيق في اضافه اداء الجافا سكربت ورفع ما تحب من صور ومواضيع ويمكنك تكررها اتبع
الكود
 
 <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/AVvXsEjDR-_qPIK12xxl1R6tistLkvvKE2DorbHV2ld7o1VuvTgb6ZN4h3Wi1d6TTs05kDiC6KvTj4u6xC12B1i08VeDUSZYEpPmc4YUehO5F7e8k3VNI-g2SNMsBuxoNHb0XoCz3iS7didLz6a0/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>
 
 نشاهد المثال الان
 التكرار فوق
 </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>
 بتغير الصوره والمحتوي
 يمكنك تغير اللون والحجم : وغيرها

القسم :

إرسال تعليق

أحدث أقدم