mardi 28 juin 2016

Moving an image up in CSS

So, for the past hour I've being trying to move this image using the css property position. My problem is every time I move it using top or bottom it doesn't work correctly. Here's a screenshot of it before using said properties and after. Below you can find my html & css. Lastly, this position has to be absolute or the image completely disappears.

HTML

<section class="row posts">
    <div class="col-md-6 col-md-offset-3">
        <header><h3>What others have to say...</h3></header>
        @foreach($posts as $post)
            <article class="post" data-postid="">
                <p></p>
                <div class="info">
                    Posted by  on 
                </div>
                <div class="interaction">
                    <a href="#" class="like heart"></a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|
                    <a href="#" class="like">Dislike</a>
                    @if(Auth::user() == $post->user)
                        |
                        <a href="#" class="edit">Edit</a> |
                        <a href="">Delete</a>
                    @endif
                </div>
            </article>
        @endforeach
    </div>
</section>

CSS

.heart{
    background: url('http://localhost:8079/uncaughterror/public/src/img/web_heart_animation.png');
    background-position: left;
    background-repeat: no-repeat;
    height: 50px; width: 50px;
    cursor: pointer;
    position: absolute;
    left: 12px;
    bottom: 5px; //This or 'top' is what causes my entire problem
    background-size:1450px;
}

.heart:hover {
    background-position: right;
}



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire