CODEWITHSUNDEEP
htmlcsscss-transitionscss-transforms
Simon K
Simon K

Reputation: 83

CSS transitions/transforms not affecting required elements

I'm just trying to get to grips with advanced transitions and transforms and having a little trouble with a section I'm working on. I have everything working as required except I have an h5 over the image which I do NOT want to change/transform but I do want the image to still transform.

My fiddle should illustrate better than words - http://jsfiddle.net/28m3fpcv/2

And the code 

.news-container {
    background: #2a2a2a;
    width: 90%;
    margin: 30px 5%;
}

.news-photo {
    float: left;
    width: 33.333333333%;
    position: relative;
    max-height: 200px;
    overflow: hidden;
}

.news-photo img {
    opacity: 0.5;
    max-width: 100%;
    display: block;
    transition: all 1s ease;
}

.news-photo img:hover {
    -webkit-transform:scale(1.25); /* Safari and Chrome */
    -moz-transform:scale(1.25); /* Firefox */
    -ms-transform:scale(1.25); /* IE 9 */
    -o-transform:scale(1.25); /* Opera */
     transform:scale(1.25);
}

.news-photo a {
    display: block;
    transition: all 1s ease;
}

.news-photo h5 {
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center;
    margin: 0;
    z-index: 20;
    font-size: 1.063em;
    font-weight: 400;
    color: #f1f1f1;
}

HTML:

<div class="news-container cf">

            <article class="news-photo">
                <a href="#">
                    <img src="http://placehold.it/1024x576"/>
                    <h5>Story Title</h5>
                </a>
            </article>

            <article class="news-photo">
                <a href="#">
                    <img src="http://placehold.it/1024x576"/>
                    <h5>Story Title</h5>
                </a>
            </article>

            <article class="news-photo">
                <a href="#">
                    <img src="http://placehold.it/1024x576"/>
                    <h5>Story Title</h5>
                </a>
            </article>

            <article class="news-photo">
                <a href="#">
                    <img src="http://placehold.it/1024x576"/>
                    <h5>Story Title</h5>
                </a>
            </article>

            <article class="news-photo">
                <a href="#">
                    <img src="http://placehold.it/1024x576"/>
                    <h5>Story Title</h5>
                </a>
            </article>

            <article class="news-photo">
                <a href="#">
                    <img src="http://placehold.it/1024x576"/>
                    <h5>Story Title</h5>
                </a>
            </article>
        </div>

If you hover over the text, the image transform reverts back. Is there any way I can not have that happen but still leave the heading alone? I tried placing the H5 outside the anchor but then obviously that isn't clickable. I want the whole thing clickable, the H5 to remain as is and the image to do the transform.

Thanks

EDIT: Sorry I should probably clarify further. The image hover is indeed working fine, the issue is when your mouse gets to the text, the zoom resets, and vice versa. The effect I'd like to achieve is that when you hover anywhere in the box, including the text, the image zoom remains but I don't want the zoom effect on the text, that should remain the original size.

Upvotes: 0

Views: 61

Answers (2)

Paulie_D
Paulie_D

Reputation: 114981

Yes, I think you can but you would have to change this

.news-photo img:hover {
    -webkit-transform:scale(1.25); /* Safari and Chrome */
    -moz-transform:scale(1.25); /* Firefox */
    -ms-transform:scale(1.25); /* IE 9 */
    -o-transform:scale(1.25); /* Opera */
     transform:scale(1.25);
}

to this

.news-photo a:hover img {
    -webkit-transform:scale(1.25); /* Safari and Chrome */
    -moz-transform:scale(1.25); /* Firefox */
    -ms-transform:scale(1.25); /* IE 9 */
    -o-transform:scale(1.25); /* Opera */
     transform:scale(1.25);
}

JSfiddle Demo

Upvotes: 4

Marco Hengstenberg
Marco Hengstenberg

Reputation: 864

When adding transform: scale(1) to .news-photo img you should be fine. It helps the browser to understand where to start the transformation and where to end it when the :hover state is being triggered.

Upvotes: -1

Related Questions