Witam.
Nie wiem jak zrobić responsywność obrazków po zmneijszeniu przegladarki nie dostosowują się. Zawsze jest jakiś marginez.Choć teraz wyciąlem torchę kodu aby za dużo nie było motania się i wszystko się sypło. pierwszy obrazk w miarę ok się zachowuje a 2 następne na maxismalizacji jest mały a na minmalizacji się powiększa cuuuda :).Z góry dzięki :)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>gotowiec</title>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/parallax-scroll.js"></script>
<script src="js/form.js"></script>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<!--<link href="css/main.min.css" rel="stylesheet">--><!-- style pod slider nie oborbione -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link href="css/image_hover.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="col-md-4 center-block">
<div class="section-box-four">
<!---->
<figure>
<h3>Service</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type</p>
<a href="#" class="btn btn-read">Read More</a></figure>
<img src="http://www.ayushmaantechnologies.com/wp-content/uploads/2017/01/5-things-to-consider-when-selecting-a-web-design-agency-1.jpg" class="img-responsive"/>
</div>
<div class="col-md-4 center-block">
<div class="section-box-five">
<figure>
<h3>Service</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type</p>
<a href="#" class="btn btn-read">Read More</a>
</figure>
<img src="http://www.ayushmaantechnologies.com/wp-content/uploads/2017/01/5-things-to-consider-when-selecting-a-web-design-agency-1.jpg" class="img-responsive"/>
</div>
</div>
<div class="col-md-4 center-block">
<div class="section-box-six">
<!---->
<figure>
<h3>Service</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type</p>
<a href="#" class="btn btn-read">Read More</a>
</figure>
<img src="http://www.ayushmaantechnologies.com/wp-content/uploads/2017/01/5-things-to-consider-when-selecting-a-web-design-agency-1.jpg" class="img-responsive"/>
</div>
</div>
</div>
</div>
</body>
.btn-read {
background: transparent;
border-radius: 0;
border: 1px solid #ffffff;
color: #fff;
}
.section-box-four{
height: 250px;
background: radial-gradient(#6e6e6e,#2f2f2f);
background: -webkit-radial-gradient(#6e6e6e,#2f2f2f);
background: -moz-radial-gradient(#6e6e6e,#2f2f2f);
color: #fff;
position: relative;
overflow:hidden;
}
.section-box-four figure {
position: absolute;
text-align: center;
padding: 19px;
width: 100%;
height: 100%;
}
.section-box-four img{
height: 100%;
position: absolute;
transition: ease-in-out .5s;
-webkit-transition: ease-in-out .5s;
-moz-transition: ease-in-out .5s;
}
.section-box-four:hover img{
transform: translate(-100%,0);
-webkit-transform: translate(-100%,0);
-moz-transform: translate(-100%,0);
}
.section-box-five{
height: 250px;
background: radial-gradient(#6e6e6e,#2f2f2f);
background: -webkit-radial-gradient(#6e6e6e,#2f2f2f);
background: -moz-radial-gradient(#6e6e6e,#2f2f2f);
color: #fff;
position: relative;
overflow:hidden;
}
.section-box-five figure {
position: absolute;
text-align: center;
padding: 19px;
width: 100%;
height: 100%;
}
.section-box-five img{
height: 100%;
position: absolute;
transition: ease-in-out .5s;
-webkit-transition: ease-in-out .5s;
-moz-transition: ease-in-out .5s;
}
.section-box-five:hover img{
transform: translate(100%,0);
-webkit-transform: translate(100%,0);
-moz-transform: translate(100%,0);
}
.section-box-six{
height: 250px;
background: radial-gradient(#6e6e6e,#2f2f2f);
background: -webkit-radial-gradient(#6e6e6e,#2f2f2f);
background: -moz-radial-gradient(#6e6e6e,#2f2f2f);
color: #fff;
position: relative;
overflow:hidden;
}
.section-box-six figure {
position: absolute;
text-align: center;
padding: 19px;
width: 100%;
height: 100%;
}
.section-box-six img{
height: 100%;
position: absolute;
transition: ease-in-out .5s;
-webkit-transition: ease-in-out .5s;
-moz-transition: ease-in-out .5s;
}
.section-box-six:hover img{
transform: translate(0,-100%);
-webkit-transform: translate(0,-100%);
-moz-transform: translate(0,-100%);
}
height: 250px;
background: radial-gradient(#6e6e6e,#2f2f2f);
background: -webkit-radial-gradient(#6e6e6e,#2f2f2f);
background: -moz-radial-gradient(#6e6e6e,#2f2f2f);
color: #fff;
position: relative;
overflow:hidden;
}
.section-box-twelve figure {
position: absolute;
text-align: center;
padding: 10px 19px 19px 19px;
width: 100%;
height: 100%;
transition: ease-in-out .5s;
opacity: 0;
transform: scale(2);
}
.section-box-twelve:hover figure {
opacity: 1;
transform: scale(1);
background: rgba(0, 0, 0, 0.71);
}
.section-box-twelve figure a{
color: #fff;
font-size: 3em;
top: 35%;
position: relative;
}
.section-box-twelve img{
height: 100%;
}
