Overcoming an Image with DIV

Question

Overcoming an Image with DIV

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

Gentlemen, I am pulling some images from the database, and when the user hover over them an opaque red color will be above them, and a title and text will be shown. I did this by putting the image into a div, and inside that div I put another div with those 2 contents. I'm trying to make it invisible and put the hover mouse effect on it, but I only managed to do with position:absolute and z-index , but this way, as soon as 4 images appear and a fifth is loaded - it should go to the next line - it stays on top of the first one.

I want to leave it like this - view example How are you doing - view image

HTML

<div class="pure-g">
    @foreach($eventos as $eventos)
        <div class="pure-u-6-24">
            <a href="">
                <div class="conteudoEventoEscondido hideEvento">
                    <p class="tituloEventoEscondido">{{$eventos->nome}}</p>
                    <p class="localEventoEscondido">{{$eventos->local}}</p>
                </div>
                <img src="assets/images/eventos/thumbs/{{$eventos->miniatura}}" alt="{{$eventos->nome}}">
            </a>
        </div>
    @endforeach
</div>

CSS

.pure-u-6-24 {
    .marginReduzida(6px,0px);
        a{
            text-decoration: none;
            &:hover {
                .conteudoEventoEscondido {
                    display: block !important;
                }
            }
            .conteudoEventoEscondido {
                width: 17.25%;
                height: 36.5%;
                display: block;
                background-color: rgba(210, 183, 134, 0.8);
                background: rgba(210, 183, 134, 0.8);
                color: rgba(210, 183, 134, 0.8);
                .padding(30px,0,0,30px);
                .tituloEventoEscondido {
                    font-size: 16px;
                    font-weight: bold;
                    .colorFonte(#4B392C);
                    .margin(0,0,8px,0);
                }
                .localEventoEscondido {
                    font-size: 12px;
                    font-style: italic;
                    .colorFonte(#4B392C);
                }
                z-index: 2;
                position: absolute;
            }
            img {
                @media screen and (min-width: 320px) and (max-width: 768px){
                    width: 100%;
                }
                z-index: 1;
                position: absolute;
            }
        }
    }

html css laravel less

asked by anonymous 03.09.2014 / 19:53

2 answers

1

Via CSS, you can use positioning structures:

HTML

<div class="image">
      <img src="http://photos.travellerspoint.com/537624/large_DSC_0081__6_.jpg"alt="" />
      <h2>Cidades mais elegantes do mundo: <br />NeoTokyo</h2>
</div>

CSS

.image { 
   position: relative; 
}

h2 { 
   position: absolute; 
   bottom: 20px; 
   left: 0px; 
    padding: 0 20px 0 20px;
    color:White;
    background-color: rgba(0,0,0,.8);
}

Result:

See here the Fiddle of this solution.

03.09.2014 / 20:05

Select saves the same data in 2 different fields Problem handling XML

score 1 · Accepted Answer

Following the code from @OnoSendai - thank you very much - I was able to achieve the expected effect.

HTML

@section('conteudo')
    <main>
        <div id="eventos">
            <div class="pure-g">
                @foreach($eventos as $eventos)
                    <div class="pure-u-6-24">
                        <a href="">
                            <div class="caixaOculta caixaOcula-efeitos">
                                <img src="assets/images/eventos/thumbs/{{$eventos->miniatura}}" />
                                <div class="mask">
                                    <h2>{{$eventos->nome}}</h2>
                                    <p>{{$eventos->local}}</p>
                                </div>
                            </div>
                        </a>
                    </div>
                @endforeach
            </div>
        </div>
    </main>
@stop

CSS

.pure-g {
    .pure-u-6-24 {
        width: 23.5%;
        .margin(5px,10px,5px,0);

        .caixaOculta {
            width: 100%;
            position: relative;
        }
        .caixaOculta .mask {
            width: 100%;
            height: 100%;
            position: absolute;
            overflow: hidden;
            top: 0;
            left: 0;
        }
        .caixaOculta img {
            width: 100%;
            display: block;
            position: relative;
        }
        .caixaOculta h2 {
            font-family: Georgia;
            font-size: 16px;
            .colorFonte(#271714);
            position: relative;
            .margin(26px,0,0,26px);
        }
        .caixaOculta p {
            .colorFonte(#271714);
            font-family: Georgia;
            font-style: italic;
            font-size: 12px;
            padding: 10px 20px 20px;
            position: relative;
            .margin(0,0,0,6px);
        }

        /*Efeito*/
        .caixaOculta-efeitos .mask {
            -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
            filter: alpha(opacity=0);
            opacity: 0;
            background-color: rgba(209,181,134, 0.9);
            -webkit-transition: all 0.4s ease-in-out;
            -moz-transition: all 0.4s ease-in-out;
            -o-transition: all 0.4s ease-in-out;
            -ms-transition: all 0.4s ease-in-out;
            transition: all 0.4s ease-in-out;
        }
        .caixaOculta-efeitos h2 {
            -webkit-transform: translateY(-100px);
            -moz-transform: translateY(-100px);
            -o-transform: translateY(-100px);
            -ms-transform: translateY(-100px);
            transform: translateY(-100px);
            -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
            filter: alpha(opacity=0);
            opacity: 0;
            -webkit-transition: all 0.2s ease-in-out;
            -moz-transition: all 0.2s ease-in-out;
            -o-transition: all 0.2s ease-in-out;
            -ms-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out;
        }
        .caixaOculta-efeitos p {
            -webkit-transform: translateY(100px);
            -moz-transform: translateY(100px);
            -o-transform: translateY(100px);
            -ms-transform: translateY(100px);
            transform: translateY(100px);
            -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
            filter: alpha(opacity=0);
            opacity: 0;
            -webkit-transition: all 0.2s linear;
            -moz-transition: all 0.2s linear;
            -o-transition: all 0.2s linear;
            -ms-transition: all 0.2s linear;
            transition: all 0.2s linear;
        }
        .caixaOculta-efeitos:hover .mask {
            -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
            filter: alpha(opacity=100);
            opacity: 1;
        }
        .caixaOculta-efeitos:hover h2, .caixaOculta-efeitos:hover p {
            -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
            filter: alpha(opacity=100);
            opacity: 1;
            -webkit-transform: translateY(0px);
            -moz-transform: translateY(0px);
            -o-transform: translateY(0px);
            -ms-transform: translateY(0px);
            transform: translateY(0px);
        }
        .caixaOculta-efeitos:hover p {
            -webkit-transition-delay: 0.1s;
            -moz-transition-delay: 0.1s;
            -o-transition-delay: 0.1s;
            -ms-transition-delay: 0.1s;
            transition-delay: 0.1s;
        }
    }

Using blessed position:relative and position:absolute I got the div to override the image, and when I move the mouse the div appears with a beige, transparent color and a title and text appear with an effect (one coming from above and another from below).