ساخت یک باکس برای نمایش عکس

سوال

سلام و عرض ادب
آقا این سایت چطوری این بخش رو ساخته یعنی یک عکس با ارتفاع زیاد رو داخل یک باکس قرار داده و بطور خودکار از بالا تا پایین رو نمایش میده

https://www.portal.ir/shopbuilder/

اینم لینک عکسش
https://www.portal.ir/themes/custom-5480/img/theme_preview_1.jpg

حل شد 0
, 2019-02-03T19:13:17+03:30 1 پاسخ ها کاربر تازه 0

پاسخ ها ( 1 )

  1. SOLTANE GHALBHA
    1
    2019-02-04T20:51:17+03:30
    پاسخ

    سلام دوست عزیز

    با transition تو css میتونی انجام بدی، نمونه کدی برات آماده کردم

    <!DOCTYPE HTML>
<html>
<head>
	<title> اسکرول خودکار تصویر </title>
	<meta charset="UTF-8">
</head>
<style>
body {
  background: #2d97db;
}

.webpage {
  border-radius: 1em;
  border: 2em solid #fff;
  background: #e45763;
  background: #e25865 url(https://s9.picofile.com/file/8351231826/beporsam.jpg) no-repeat top left;
  background-size: 98% auto;
  width: 40em;
  height: 30em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: scroll 5s infinite cubic-bezier(.52, -0.39, .3, 1.43);
}

@keyframes scroll {
  0,
  10% {
    background-position: 0 0;
  }
  20%,
  30% {
    background-position: 0 -22em;
  }
  50%,
  60% {
    background-position: 0 -50em;
  }
  90%,
  100% {
    background-position: 0 0;
  }
}

.hover-message {
  background: rgba(0, 0, 0, 0.5);
  border-radius:0.5em;
  position: absolute;
  top: 4em;
  right: 4em;
  bottom: 4em;
  left: 4em;
  line-height: 6.75em;
  font-size: 2em;
  font-family: sans-serif;
  color: #fff;
  text-align: center;
  opacity:0;
  transition:all 0.2s ease-out;
  transform:translateY(0.8em);
}
.webpage:hover {
  animation-play-state: paused;
}
.webpage:hover .hover-message{
  opacity: 1;
  transform:none;
}
</style>
<body>
<div class="webpage">
 <div class="hover-message">توقف وقتی که ماوس میاد رو عکس</p>
</div>
</body>
</html>

    موفق باشید.

    بهترین پاسخ

ارسال یک پاسخ