1

So,

I was looking into expanding images to make them fill the width, given a certain height.

I decided I wanted to do something along the lines of reflecting the image both left and right.

However, I can only get it to apply to one side of the image.

HTML:

<div class="image">
    <img src="http://i.imgur.com/LukIbK7.jpg" />
</div>

css:

.image {
    width:100%;
    margin:auto;
    text-align:center;
}
.image img {
    width:50%;
    -webkit-box-reflect: left 0px -webkit-gradient(linear, right top, left top, from(transparent), color-stop(20%, transparent), to(rgba(255, 255, 255, 0.5)));
}

jsfiddle

I've also tried using :before as directed in a similar post (to do with multiple borders) here

If there is also another solution, please inform me (without having to actually edit the images).

Essentially, I wanted the result css to be:

.image img {
    width:50%;
    -webkit-box-reflect: left 0px -webkit-gradient(linear, right top, left top, from(transparent), color-stop(20%, transparent), to(rgba(255, 255, 255, 0.5)));
    -webkit-box-reflect: right 0px -webkit-gradient(linear, left top, right top, from(transparent), color-stop(20%, transparent), to(rgba(255, 255, 255, 0.5)));
}

To achieve:

enter image description here

But obviously it will just overwrite it.

Community
  • 1
  • 1
andyroo
  • 384
  • 2
  • 13

1 Answers1

1

So far, the only thing remotely similar to what I want to create is by using some dodgey jquery that duplicates the img.

$("img").clone().appendTo(".image")
.css("-webkit-box-reflect", "left 0px -webkit-gradient(linear, right top, left top, from(transparent), color-stop(20%, transparent), to(rgba(255, 255, 255, 0.5)))")
.css("margin-top", "-100%");

It's so messy though: http://jsfiddle.net/hum7uo2y/1/

EDIT:

Found a way, didn't think about reflecting a div instead.

HTML is now:

<div class="image">
    <div class="reflect">
        <img src="http://i.imgur.com/LukIbK7.jpg" />
    </div>
</div>

css is now:

.image {
    width:100%;
    margin:auto;
    text-align:center;
}
.reflect {
    width:50%;
    margin:auto;
    -webkit-box-reflect: right -2px -webkit-gradient(linear, left top, right top, from(transparent), color-stop(20%, transparent), to(rgba(255, 255, 255, 0.5)))
}
.image img {
    width:100%;
    -webkit-box-reflect: left 0px -webkit-gradient(linear, right top, left top, from(transparent), color-stop(20%, transparent), to(rgba(255, 255, 255, 0.5)));
}

New fiddle: http://jsfiddle.net/hum7uo2y/3/

andyroo
  • 384
  • 2
  • 13