Исчезновение текста под каскадными изображениями

0

Я пытаюсь заставить текст появляться под этими 4-мя изображениями, когда они зависают без изменения позиции, а также делают эти изображения интерактивными (гиперссылки).

В настоящий момент изображения находятся в том положении, в котором они мне нравятся, но когда я навис над ними, они перемещаются так, чтобы остальные находились под первым изображением, а затем текст справа от изображений. Что я делаю не так?

Я также хотел бы, чтобы там был текст, обернутый под этими изображениями.

Здесь файл CSS (fadeintext.css)

#ex3 
{ width: 1280px; height: 256px; line-height: 0px; color: transparent; font-size: 50px; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; text-transform: uppercase; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; }
#ex3:hover { line-height: 256px; color: #575858; } #ex3 img{ float: left; margin: 0 15px; }

HTML-страница:

<html><head>
<head>
<meta charset="utf-8">
<meta name="description" content="description">

<title>David Diack</title>

<link rel="stylesheet" type="text/css" media="screen" href="fadeintext.css">

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<style type="text/css"></style></head>
</head>
<div id="ex3">
        <img src="best/instagram.png"><p>Instagram</p>
        <img src="best/twitter.png"><p>Twitter</p>
        <img src="best/gplus.png"><p>Google+</p>
        <img src="best/steam.png"><p>Steam</p>
    </div>
</html>

И здесь страница и таблица стилей CSS вместе http://www.diack.co.za/

Если кто-то может любезно сказать мне, что я должен делать, это было бы очень признательно.

Теги:
fadein

2 ответа

0
Лучший ответ

Как насчет этого?

HTML:

<div id="ex3">
    <div> 
        <img src="http://www.diack.co.za/best/instagram.png" />
        <p>Instagram</p>
    </div>    
    <div>     
        <img src="http://www.diack.co.za/best/twitter.png"/>
        <p>Twitter</p>
    </div>        
    <div>     
        <img src="http://www.diack.co.za/best/gplus.png"/>
        <p>Google+</p>
    </div>    
    <div>     
        <img src="http://www.diack.co.za/best/steam.png" />
        <p>Steam</p>
    </div>    
</div>

CSS:

#ex3 { width: 1280px; 
    height: 256px; 
    line-height: 0px; 
    color: transparent; 
    font-size: 50px; 
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-weight: 300; 
    text-transform: uppercase; 
}

#ex3 div:hover { 
    line-height: 0px; 
    color: #575858; 
}

p {
    text-align: center;
}

#ex3 div{ 
    float: left; 
    margin: 0 15px; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
}

#ex3 div:nth-of-type(2){ 
    margin-top: 50px;
}

#ex3 div:nth-of-type(3){ 
    margin-top: 100px;
}

#ex3 div:nth-of-type(4){ 
    margin-top: 150px;
}
Поделиться
  • 0
    Это хорошо работает, но я все еще пытаюсь получить его так, чтобы у каждого изображения был свой собственный текст при наведении, поэтому, например, если вы наводите курсор на первое изображение, он будет отображать текст, связанный с первым изображением.
  • 0
    Нет проблем. Смотрите мой обновленный ответ
Показать ещё 9 комментариев
0

Возможно, вам придется изменить структуру HTML и обернуть каждое изображение и связанный с ним текст в элементе.

Я использовал структуру figure/figcaption, но легко адаптируюсь.

Пример Codepen

Поделиться
  • 0
    Чоппер очень любезно помог мне в этом, спасибо. Посмотрите на diack.co.za и скажите, все ли в порядке?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню