Please help with Image Reflection

  • I got this code from Webdesignerwall for image reflections but I’m not able to implement it all the way with WordPress.

    CSS Code

    .reflection .image-wrap {
	-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.5);
	-moz-box-shadow: inset 0 0 1px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.5);
	box-shadow: inset 0 0 1px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.5);
	-webkit-transition: .5s; -moz-transition: .5s; transition: .5s;
	-webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px;
}
.reflection .image-wrap:after {
	position: absolute;
	content: ' ';
	width: 100%; height: 30px; bottom: -31px; left: 0;
	-webkit-border-top-left-radius: 20px; -webkit-border-top-right-radius: 20px; -moz-border-radius-topleft: 20px; -moz-border-radius-topright: 20px;
	border-top-left-radius: 20px; border-top-right-radius: 20px;
	background: -moz-linear-gradient(top, rgba(0,0,0,.3) 0%, rgba(255,255,255,0) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,.3)), color-stop(100%,rgba(255,255,255,0)));
	background: linear-gradient(top, rgba(0,0,0,.3) 0%,rgba(255,255,255,0) 100%);
}

    HTML Code

    <div class="box reflection">
<span class="image-wrap " style="position:relative; display:inline-block; background:url(https://i47.tinypic.com/2i7y42p.png)">
<img style="opacity: 0;" src="https://i47.tinypic.com/2i7y42p.png" alt="ALT TAG" align="right"></span></div>

    And here is the PHP code for the image I’m trying to apply this style to

    PHP Code:
    `<?php $values = get_post_custom_values(“cf_Thumbnail”);if ( !empty($values) ) {
    echo ‘<img class=”myimage” src=”‘ . $values[0].'” alt=”ALT TAG” align=”right” vspace=”15″ hspace=”15″ >’;}else { echo ”;}?>`

    If anyone knows how to implement all this together, please help. Thanks.

Viewing 15 replies - 1 through 15 (of 15 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Assuming you’re working on a custom theme, put the CSS into style.css and put the PHP code into the relevant template file.

    Thread Starter Jim Bob

    (@usmanmalikx)

    Yes, I’ve tried that, the problem is the image shows up under the <span> but not the one that has the <img> tag. And thats because <img> also has opacity of 0 but if I change these settings then I loose most of the other effects such as rounded borders.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    It’s very difficult to envisage what you mean, can you provide imagery?

    Thread Starter Jim Bob

    (@usmanmalikx)

    This is a picture of it not resizing properly

    Its cutting the image off.

    Try putting the codes in an HTML/CSS file and you should be able to see what I mean.

    Thread Starter Jim Bob

    (@usmanmalikx)

    This is suppose to be the picture but its getting cut after applying the css style since its not “resizing.”

    https://applenapps.com/wp-content/uploads/2011/08/iphone_4_colors.jpg

    Thread Starter Jim Bob

    (@usmanmalikx)

    If I set a width or a height, it actually cuts the image to that width/height. What I want it to do is to resize the image (with the reflection) as in shrink the image with its correct aspect ratio.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    image shows up under the <span> but not the one that has the <img> tag

    This I cannot understand.

    This is a picture of it not resizing properly
    Its cutting the image off.

    Can you just add a width to the span element?

    Thread Starter Jim Bob

    (@usmanmalikx)

    Yes, I can but that doesn’t resize the image, it just sets the boundry.

    Image

    See the picture on the top is the one with the style, if I set width/height to it, then the image doesnt get resized, only the amount shown for the image is changed.

    Whereas on the picture on the bottom actually gets resized as in it getes smaller with the correct aspect ratio.

    PS (those are both linking to the same image URL, just different css style)

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    How about setting a height and width for the image?

    Thread Starter Jim Bob

    (@usmanmalikx)

    U mean like resize it in photoshop

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    You can add height and width in CSS
    https://www.w3schools.com/cssref/pr_dim_width.asp

    Thread Starter Jim Bob

    (@usmanmalikx)

    That doesn’t resize the image, it only changes how much of it is shown.

    Image

    By changing the width/height only shows more or less of the image, it doesnt change the actual image.

    Thread Starter Jim Bob

    (@usmanmalikx)

    See how in this image the size of the picture changes

    Image

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    The image resized for me, make sure you apply the image URL into both the span CSS background and HTML img src.

    Thread Starter Jim Bob

    (@usmanmalikx)

    Can you show me the code that you used to shrink the image.

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘Please help with Image Reflection’ is closed to new replies.