CODEWITHSUNDEEP
htmlcsssafari
user3809872
user3809872

Reputation:

Image height in safari

I have a problem with some image in safari. It is working everywhere but not in safari. I've some images on my site but on safari the image's are going way to high.

The website is development.mar-bakker.nl

<div class="col-xs-12 col-sm-4 col-md-4">
                <div class="grid wow zoomIn">
                    <figure class="effect-bubba">
                        <img src="assets/images/item-2.jpg" class="img-responsive" alt="img01"/>
                        <figcaption>
                            <h2>Webshop <span>PC4U</span></h2>
                            <p>Lily likes to play with crayons and pencils</p>
                        </figcaption>           
                    </figure>
                </div>

            </div>

And the css is this:

    figure.effect-bubba {
    background: #9e5406;
}
figure.effect-bubba img {
    opacity: 0.7;
    -webkit-transition: opacity 0.35s;
    transition: opacity 0.35s;
}

figure.effect-bubba:hover img {
    opacity: 0.4;
}

figure.effect-bubba figcaption::before,
figure.effect-bubba figcaption::after {
    position: absolute;
    top: 30px;
    right: 30px;
    bottom: 30px;
    left: 30px;
    content: '';
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
}

figure.effect-bubba figcaption::before {
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-transform: scale(0,1);
    transform: scale(0,1);
}

figure.effect-bubba figcaption::after {
    border-right: 1px solid #fff;
    border-left: 1px solid #fff;
    -webkit-transform: scale(1,0);
    transform: scale(1,0);
}

figure.effect-bubba h2 {
    padding-top: 10%;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0,-20px,0);
    transform: translate3d(0,-20px,0);
    color: #fff;
}

figure.effect-bubba p {
    padding: 20px 2.5em;
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(0,20px,0);
    transform: translate3d(0,20px,0);
}

figure.effect-bubba:hover figcaption::before,
figure.effect-bubba:hover figcaption::after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

figure.effect-bubba:hover h2,
figure.effect-bubba:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

Can someone help me.

Upvotes: 0

Views: 642

Answers (2)

user3809872
user3809872

Reputation:

i found the error! it was by a diffent css element

   .grid figure figcaption, .grid figure figcaption > a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Upvotes: 1

Dilemmat_Dag
Dilemmat_Dag

Reputation: 463

Try to remove the max-width and min-height definitions in the .grid figure img selector

.grid figure img { position: relative; display: block; /* min-height: 100%; */ /* max-width: 100%; */ opacity: 0.8; }

Upvotes: 0

Related Questions