1
Я возился с html и css, пытаясь узнать кое-что.Дополнительный ящик появляется под контейнером при зависании
Прежде чем двигаться дальше, здесь jfiddle, что показывает проблему (в ее принципе).
В настоящее время у меня есть это:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200" rel="stylesheet">
<link rel=stylesheet type="text/css" href="css/index.css">
</head>
<body>
<div class="logo">
<a>
<img src="images/LogoWhiteSmall.png" alt="Hardnose Logo" target="_blank">
</a>
</div>
<div class="message">Swimming your way</div>
</body>
</html>
и это код CSS (на самом деле SCSS, жаль об этом):
@import 'fontsAndColors';
/* Setting frame */
* {
height: 100%;
width: 100%;
margin: 0;
font-family: $main_font;
}
body {
background: $hn_green;
/* For browsers that do not support gradients */
background: -webkit-linear-gradient(left top, $hn_green, $hn_blue);
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom right, $hn_green, $hn_blue);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom right, $hn_green, $hn_blue);
/* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom right, $hn_green, $hn_blue);
/* Standard syntax (must be last) */
}
img {
height: auto;
width: auto;
margin: auto;
left: 0;
top: 0;
right: 0;
bottom: 0;
position: absolute;
opacity: 0.2;
z-index: 1;
}
.logo {
display: inline-block;
height: auto;
width: auto;
margin: auto;
:hover {
height: auto;
width: auto;
opacity: 1.0;
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
transition: all 0.5s ease;
}
}
.message {
font-size: .8em;
text-align: center;
color: $hn_white;
height: auto;
width: auto;
position: absolute;
bottom: 45%;
left: 0;
right: 0;
opacity: .2;
}
Теперь проблема заключается в следующем: когда я наведите изображение, я просто хочу, чтобы он выскочил. Это все работает. Тем не менее, во время зависания, я, кажется, создаю небольшой раздел окна под ним. Таким образом, при наведении логотипа полоса прокрутки показывает, что я могу немного прокрутить (см. Рисунок), пока я не мог. Любые идеи, что вызывает это?
Спасибо!
Вы лучше предоставить нам экземпляр на jsfiddle. –
Это немного менее ясно в jsfiddle, но вы можете увидеть небольшой участок, где градиент «перезапускается» ниже: [jsfiddle] (https://jsfiddle.net/01poLwam/1/) Я изменил градиент, чтобы сделать его более Чисто. Это маленький серый бар внизу, который меня заводит. – Inkidu616
Возможно, вы не исправили ошибки, о которых упоминалось. Для меня это хорошо работает http://joxi.ru/nAyxpzkfY9BbG2 –