akcanngalip
Öğrenci
- Katılım
- 16 Eylül 2020
- Mesajlar
- 1
- Reaksiyon puanı
- 0
- Puanları
- 1
- Yaş
- 24
Merhabalar bugün web sitesi tasarlarken bir sorunla karşılaştım. Bu sorun mouse üzerine geldiğinde büyüyen resmin div'in dışına taşması. Aşağıya kodları bırakıyorum. Desteğinizi bekliyorum.
HTML:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<style type="text/css">
}
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #e8e8e8;
}
article {
width: 800px;
margin: 20px auto;
box-shadow: 0 0 6px 3px rgba(0,0,0,.2);
}
section {
text-align: center;
padding: 20px 40px;
}
section:nth-child(odd) {
background: #ccc;
}
h1 {
text-align: center;
}
img {
border: 1px solid black;
margin-right: 20px;
}
.base img {
width: 400px;
height: 300px;
margin-left: -37px;
margin-top:-53px;
z-index: 0;
}
.fill img {
object-fit: fill;
margin-left: -1100px;
border-radius: 25px
}
.contain img {
object-fit: contain;
}
.cover img {
object-fit: cover;
}
.scale-down img {
object-fit: scale-down;
}
.none img {
object-fit: none;
}
#rcorners1 {
background-color: white !important;
background-position: center !important;
background-repeat: no-repeat !important;
text-align: center !important;
position: absolute;
width: 350px !important;
height: 60px !important;
z-index: 2;
margin-top: 217px;
margin-left: 30px;
opacity:0.9;
}
#rcorners {
position: absolute;
z-index: 1;
width: 400px;
height:350px;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
-webkit-box-shadow: 0 0 0 4px white, 0 5px 3px black;
-moz-box-shadow: 0 0 0 4px white, 0 5px 3px black;
box-shadow: 0 0 0 4px white, 0 5px 3px black;
background-color: white;
}
.all-browsers {
margin: 0;
padding: 5px;
background-color: lightgray;
}
.all-browsers > h1, .browser {
margin: 10px;
padding: 5px;
}
.browser {
background: white;
}
.browser > h2, p {
margin: 4px;
font-size: 90%;
}
.resim-zoom{
position: relative;
z-index: 0;
-webkit-transform: scale(1);
-ms-transform: scale(1);
-moz-transform: scale(1);
transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-webkit-transition: all .3s ease-in;
-ms-transition: all .3s ease-in;
}
.resim-zoom:hover{
z-index:3;
-webkit-transform: scale(1.5);
-ms-transform: scale(1.5);
-moz-transform: scale(1.5);
transform: scale(1.5);
}
</style>
</head>
<body>
</style>
</head>
<body style = "background-repeat: no-repeat;background-size: 100% 100%;background-attachment: fixed;background-position: center; background-image: url(https://3.bp.blogspot.com/-O6t8kFrS07k/T3Lftx6TG6I/AAAAAAAAP4Y/6grRiq6y6uY/s1600/backgroud-blue-sea.jpg)">
<div id="rcorners"><p></p><section class="base base"><img class="resim-zoom" style="border-radius: 15px;border:0" src="https://mscmedx.net/wp-content/uploads/2020/07/seo-1187x800.png"></div></section>
<div id="rcorners1">
<p style="margin-top: 15px; font-family: 'Roboto', sans-serif;font-size: 15px;text-align: center;">SEO Hizmeti <br><button class="teklif teklif1">Teklif Al <i class="fa fa-shopping-cart"></i></button></p>
</div>
</div>
</body>
</html>
