Title: Please help with Image Reflection Last modified: August 20, 2016 --- # Please help with Image Reflection * [Jim Bob](https://wordpress.org/support/users/usmanmalikx/) * (@usmanmalikx) * [13 years, 10 months ago](https://wordpress.org/support/topic/please-help-with-image-reflection/) * I got this code from [Webdesignerwall](http://webdesignerwall.com/tutorials/css3-image-styles) 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 * ```
ALT TAG
``` * And here is the PHP code for the image I’m trying to apply this style to * PHP Code: `’;}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](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [13 years, 10 months ago](https://wordpress.org/support/topic/please-help-with-image-reflection/#post-3000544) * 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](https://wordpress.org/support/users/usmanmalikx/) * (@usmanmalikx) * [13 years, 10 months ago](https://wordpress.org/support/topic/please-help-with-image-reflection/#post-3000546) * Yes, I’ve tried that, the problem is the image shows up under the but not the one that has the tag. And thats because 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](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [13 years, 10 months ago](https://wordpress.org/support/topic/please-help-with-image-reflection/#post-3000548) * It’s very difficult to envisage what you mean, can you provide imagery? * Thread Starter [Jim Bob](https://wordpress.org/support/users/usmanmalikx/) * (@usmanmalikx) * [13 years, 10 months ago](https://wordpress.org/support/topic/please-help-with-image-reflection/#post-3000551) * 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](https://wordpress.org/support/users/usmanmalikx/) * (@usmanmalikx) * [13 years, 10 months ago](https://wordpress.org/support/topic/please-help-with-image-reflection/#post-3000552) * This is suppose to be the picture but its getting cut after applying the css style since its not “resizing.” * [http://applenapps.com/wp-content/uploads/2011/08/iphone_4_colors.jpg](http://applenapps.com/wp-content/uploads/2011/08/iphone_4_colors.jpg) * Thread Starter [Jim Bob](https://wordpress.org/support/users/usmanmalikx/) * (@usmanmalikx) * [13 years, 10 months ago](https://wordpress.org/support/topic/please-help-with-image-reflection/#post-3000554) * 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](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [13 years, 10 months ago](https://wordpress.org/support/topic/please-help-with-image-reflection/#post-3000555) * > image shows up under the but not the one that has the `` 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](https://wordpress.org/support/users/usmanmalikx/) * (@usmanmalikx) * [13 years, 10 months ago](https://wordpress.org/support/topic/please-help-with-image-reflection/#post-3000560) * Yes, I can but that doesn’t resize the image, it just sets the boundry. * [Image](http://i50.tinypic.com/20kc1vk.png) * 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](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [13 years, 10 months ago](https://wordpress.org/support/topic/please-help-with-image-reflection/#post-3000561) * How about setting a height and width for the image? * Thread Starter [Jim Bob](https://wordpress.org/support/users/usmanmalikx/) * (@usmanmalikx) * [13 years, 10 months ago](https://wordpress.org/support/topic/please-help-with-image-reflection/#post-3000562) * U mean like resize it in photoshop * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [13 years, 10 months ago](https://wordpress.org/support/topic/please-help-with-image-reflection/#post-3000565) * You can add height and width in CSS [http://www.w3schools.com/cssref/pr_dim_width.asp](http://www.w3schools.com/cssref/pr_dim_width.asp) * Thread Starter [Jim Bob](https://wordpress.org/support/users/usmanmalikx/) * (@usmanmalikx) * [13 years, 10 months ago](https://wordpress.org/support/topic/please-help-with-image-reflection/#post-3000568) * That doesn’t resize the image, it only changes how much of it is shown. * [Image](http://i46.tinypic.com/15p61d1.png) * By changing the width/height only shows more or less of the image, it doesnt change the actual image. * Thread Starter [Jim Bob](https://wordpress.org/support/users/usmanmalikx/) * (@usmanmalikx) * [13 years, 10 months ago](https://wordpress.org/support/topic/please-help-with-image-reflection/#post-3000571) * See how in this image the size of the picture changes * [Image](http://i48.tinypic.com/27wu1zk.png) * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [13 years, 10 months ago](https://wordpress.org/support/topic/please-help-with-image-reflection/#post-3000575) * 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](https://wordpress.org/support/users/usmanmalikx/) * (@usmanmalikx) * [13 years, 10 months ago](https://wordpress.org/support/topic/please-help-with-image-reflection/#post-3000775) * 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. * 15 replies * 2 participants * Last reply from: [Jim Bob](https://wordpress.org/support/users/usmanmalikx/) * Last activity: [13 years, 10 months ago](https://wordpress.org/support/topic/please-help-with-image-reflection/#post-3000775) * Status: not resolved ## Topics ### Topics with no replies ### Non-support topics ### Resolved topics ### Unresolved topics ### All topics