overlay شدن عکس با جی کوئری

Question

0

سلام. یک صفحه محصولات دارم که وقتی قسمتی از باکس محصول، هاور شد ، یک بک گراندی ظاهر بشه…مراحلی که انجام شده
۱) یک div ایجاد شده با عرض و ارتفاع مشخص
۲) از یک قطعه کد جی کوئری استفاده شده که زمان هاور شدن اون div مرحله ی بالا نشون داده بشه
اما زمانی که هاور میشه روی همه ی محصولات این div ظاهر میشه…نه روی خود همون محصول

css jquery

پست شده در ۹ مرداد ۱۳۹۸

soheila 64

کامنتی پیدا نشد.

2 جواب

0

انتخاب سلکتور تون توی کدی که نوشتین اشکال داره، در واقع شما تمام عناصری رو که کلاس .overlay-desc دارن هدف قراردادین برای همین موقع هاور بک گراند تمامی محصولات ظاهر میشه ، با توجه به کدی که نوشتین میشه بک گراند مورد نظر رو به به این صورت انتخاب کرد

 $(".hover_fly .hover_fly_btn:first-child").mouseover(function(){

    $(this).parents('.pro_outer_box').find('.overlay-desc').css({ opacity: 0.1})
});  

$(".hover_fly .hover_fly_btn:first-child").mouseout(function(){
  $(this).parents('.pro_outer_box').find('.overlay-desc').css({ opacity: 0});
});

پست شده در ۹ مرداد ۱۳۹۸

h...

score 0 · Answer 1 · 2019-07-31T15:42:13+00:00

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <title>JS Bin</title>
</head>
<body>
  
 <div class="row mt-5 justify-content-center">
   <div class="col-auto">
     <div class="card shadow-lg">
       <div class="card__image">
         <img src="https://car-images.bauersecure.com/pagefiles/89228/450x300/audi_q7_050.jpg?quality=50" class="img-fluid rounded" alt="">
         <div class="card__image__overly p-3">
           <h1>Audi</h1>
           <span class="text-muted">some desciptions here</span>
         </div>
       </div>
     </div>
   </div>
 </div>

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

</body>
</html>

.card__image {
  overflow : hidden;
  position : relative;
}

.card__image__overly {
  position : absolute;
  left: 0;
  right : 0;
  bottom : -500px;
  color : white;
  background : rgba(0,0,0,.6);
  transition : all .3s ease-in-out;
}

.card__image:hover .card__image__overly {
  bottom : 0;
}

کدهای بالا نمونه ی بدون استفاده از jquery هست و با Css خالص نوشتم شما میتونید بجای متن داخل div با کلاس card__image__overly هر متنی قرار بدید یا هر لینکی ، بسته به سلیقه ی خودتون، وقتی میشه با Css حل کرد مساله رو فک کنم جی کوئری زیاد مهم نباشه اما اگه اونم میخواین بگید براتون یه نمونه بزنم

پرسیده شده	۹ مرداد ۱۳۹۸
دیده شده	0 بار
بروزرسانی	۲ تیر ۱۳۹۹