https://testtep.000webhostapp.com/tep/ ตรงที่เป็นสินค้าทีตอนเมาส์ไปชี้ที่ภาพแล้วมันจะขึ้น caption อะครับ เปิดบน pc ไม่มีปัญหา แต่ตอนเป็นบนมือถือ มันต้องกดตรงมุมซ้ายบนอะครับถึงจะขึ้นcaption แต่พอขึ้นปุ่ป เว็บมันจะเด้งขึ้นไปข้างบนอะครับต้องเลื่อนลงมาใหม่ ไม่รู้จะแก้ตรงใหน ช่วยทีนะครับ
<section id="recent-works">
<div class="container">
<div class="center wow fadeInDown">
<h2>ผลิตภัณฑ์ของเรา</h2>
<p class="lead">เราสามารถทำการผลิต ผลิตภัณฑ์ยางขึ้นรูปทุกชนิด ตามแบบวาด หรือ ตามตัวอย่าง รวมถึงการจัดหาวัตถุดิบและข้อมูล เพื่อให้สอดคล้องตาม
ข้อกำหนดสากลต่างๆ เช่น RoHS, REACH, SOC หรืออื่นๆตามความต้องการของลูกค้า ซึ่งผลิตภัณฑ์ของเราจะรองรับในทุกกลุ่มอุตสาหกรรม โดยเราได้แบ่งออกเป็น 4 กลุ่มหลัก</p>
</div> </div>
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-3">
<div class="recent-work-wrap">
<img class="img-responsive" src="images/product/recent/item1.jpg" alt="">
<div class="overlay">
<div class="recent-work-inner">
<h3><a href="#">Automotive Rubber Part</a> </h3>
<p>Drive Shaft Cover, Cover, Mounting Support, Piston Boot, Grommet, Engine Seal, etc.</p>
<a class="preview" href="images/product/full/item1.jpg" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-3">
<div class="recent-work-wrap">
<img class="img-responsive" src="images/product/recent/item2.jpg" alt="">
<div class="overlay">
<div class="recent-work-inner">
<h3><a href="#">Electrical Rubber Part</a></h3>
<p>Hose, Bellow, Cap Heater, Cap Tube, Plug, Rubber Leg, Isolater A/C, Grommet, Damper, etc.</p>
<a class="preview" href="images/product/full/item2.jpg" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-3">
<div class="recent-work-wrap">
<img class="img-responsive" src="images/product/recent/item3.jpg" alt="">
<div class="overlay">
<div class="recent-work-inner">
<h3><a href="#">Rubber Part for Industrial Machine </a></h3>
<p>Gasket, Packing, Seal, O-Ring, Hose, Diaphragm,Picking Finger, etc.</p>
<a class="preview" href="images/product/full/item3.jpg" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-3">
<div class="recent-work-wrap">
<img class="img-responsive" src="images/product/recent/item4.jpg" alt="">
<div class="overlay">
<div class="recent-work-inner">
<h3><a href="#">General Rubber Part</a></h3>
<p>Rubber Ring, Rubber Mat, Condom Belt, Rubber for Toys, etc.</p>
<a class="preview" href="images/product/full/item4.jpg" rel="prettyPhoto"><i class="fa fa-eye"></i> View</a>
</div>
</div>
</div>
</div>
</div><!--/.row-->
</div><!--/.container-->
</section><!--/#recent-works-->
#recent-works .col-xs-12.col-sm-4.col-md-3{
padding: 5;
}
#recent-works{
padding-bottom: 20px;
}
.recent-work-wrap {
position: relative;
}
.recent-work-wrap img{
width: 100%;
}
.recent-work-wrap .recent-work-inner{
top: 0;
background: transparent;
opacity: .8;
width: 100%;
border-radius: 0;
margin-bottom: 0;
}
.recent-work-wrap .recent-work-inner h3{
margin: 10px 0;
}
.recent-work-wrap .recent-work-inner h3 a{
font-size: 24px;
color: #fff;
}
.recent-work-wrap .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
border-radius: 0;
background: #3979bd;
color: #fff;
vertical-align: middle;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
padding: 30px;
}
.recent-work-wrap .overlay .preview {
bottom: 0;
display: inline-block;
height: 35px;
line-height: 35px;
border-radius: 0;
background: transparent;
text-align: center;
color: #fff;
}
.recent-work-wrap:hover .overlay {
opacity: 1;
}