Title: CSS Help Last modified: August 13, 2019 --- # CSS Help * [omris83](https://wordpress.org/support/users/omris83/) * (@omris83) * [6 years, 10 months ago](https://wordpress.org/support/topic/css-help-85/) * I dont know if this is the right place to post this, but I’ve tried elsewhere and cant find a solution. * What I’m trying to do is to apply some CSS which when a mouse is hovered over an image, it scrolls the image from top to bottom. You often see this for sites showing demnos. * ``` body { margin: 0; padding: 0; } .attachment-portfolio-thumb.size-portfolio-thumb.wp-post-image { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 400px; height: 450px; background: url:(web.jpeg); background-size: cover; background-position: top; border: 5px solid #fff; box-shadow: 0 20px 30px rgba(0,0,0,.5); transition: 5s; } .attachment-portfolio-thumb.size-portfolio-thumb.wp-post-image:hover { background-position: bottom; } ``` * This, I found on YouTube. However I cant get it to work for my site. I’m hoping someone might be able to tell me where I’m going wrong. It’s the featured image on here I’m trying to change * _[short link removed by moderator]_ * Would appreciate anyone who can help. Thank you. - This topic was modified 6 years, 10 months ago by [Steven Stern (sterndata)](https://wordpress.org/support/users/sterndata/). * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fcss-help-85%2F%3Foutput_format%3Dmd&locale=en_US) to see the link]_ Viewing 15 replies - 1 through 15 (of 23 total) 1 [2](https://wordpress.org/support/topic/css-help-85/page/2/?output_format=md) [→](https://wordpress.org/support/topic/css-help-85/page/2/?output_format=md) * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [6 years, 10 months ago](https://wordpress.org/support/topic/css-help-85/#post-11829586) * > when a mouse is hovered over an image, it scrolls the image from top to bottom * Can you demonstrate this to illustrate what you mean? * Thread Starter [omris83](https://wordpress.org/support/users/omris83/) * (@omris83) * [6 years, 10 months ago](https://wordpress.org/support/topic/css-help-85/#post-11830149) * Hi Andrew, * Like this * Kind Regards * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [6 years, 10 months ago](https://wordpress.org/support/topic/css-help-85/#post-11830453) * That’s a bit odd and I haven’t seen that before on a website. Where would you envisage having that? It’s not a predictable experience for the user and I don’t understand what problem it is solving. * Thread Starter [omris83](https://wordpress.org/support/users/omris83/) * (@omris83) * [6 years, 10 months ago](https://wordpress.org/support/topic/css-help-85/#post-11830460) * I’ve seen it on websites where they showcase demos. * I essentially want to show full-screen images (I.e. browser captures) displayed in my feature box. When you put the mouse over the box, it scrolls so you can see the whole webpage. * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [6 years, 10 months ago](https://wordpress.org/support/topic/css-help-85/#post-11830581) * What page specifically is that feature box on? Imagine if you were a stranger coming completely new to your site – that’s the position we’re in. * Thread Starter [omris83](https://wordpress.org/support/users/omris83/) * (@omris83) * [6 years, 10 months ago](https://wordpress.org/support/topic/css-help-85/#post-11830601) * Its on every page. I’m referring to all the images in the boxes that have ‘downloads’ * You cant miss the images. * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [6 years, 10 months ago](https://wordpress.org/support/topic/css-help-85/#post-11831479) * There’s nothing on the homepage with “downloads” * Thread Starter [omris83](https://wordpress.org/support/users/omris83/) * (@omris83) * [6 years, 10 months ago](https://wordpress.org/support/topic/css-help-85/#post-11831516) * Andrew, * On the homepage, there are 6 downloads. There’s nothing else on the homepage. Its an easy digital downloads store. Every page has 6 ‘items’ these contain a picture, and some text below. I really am not sure how you’re not sure what Im referring to. * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [6 years, 10 months ago](https://wordpress.org/support/topic/css-help-85/#post-11831572) * Okay I see those 6 boxes I think, but I can already see all of those images in my scroll. How did you envisage it working on the Homepage? * Thread Starter [omris83](https://wordpress.org/support/users/omris83/) * (@omris83) * [6 years, 10 months ago](https://wordpress.org/support/topic/css-help-85/#post-11831585) * But what I want, is that in each box, there’s an image, that when you put the mouse over the image, it scrolls the image from the top to the bottom of the image. * This way, I can have a long image, and view it with a mouse over. That’s what the CSS was/is for. * I want to be able to display a webpage image in that box. So I capture the image, but it’s too long. That CSS would enable the user to see the template before they clicked on to it. * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [6 years, 10 months ago](https://wordpress.org/support/topic/css-help-85/#post-11831614) * Your theme is however cropping the images and you’ll never be able to tackle this with CSS without addressing that. Which theme are you using? * Thread Starter [omris83](https://wordpress.org/support/users/omris83/) * (@omris83) * [6 years, 10 months ago](https://wordpress.org/support/topic/css-help-85/#post-11831831) * The theme is no longer supported so I cant reach out to the devs. * Though the above CSS should still work as far as I can see as its using the top 50% before mouse over. Essentially, I was hoping someone could tell me if I had selected the wrong class as I think thats my issue. * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [6 years, 10 months ago](https://wordpress.org/support/topic/css-help-85/#post-11831874) * It’s *not going to work because the implementation is different than the YouTube video. * In the video, the person has implemented the image using a background image – and that image is larger than their image-containing-element. * In your website, your images are foreground images and your images are the same size or smaller than their image-containing-elements. - This reply was modified 6 years, 10 months ago by [Andrew Nevins](https://wordpress.org/support/users/anevins/). - This reply was modified 6 years, 10 months ago by [Andrew Nevins](https://wordpress.org/support/users/anevins/). * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [6 years, 10 months ago](https://wordpress.org/support/topic/css-help-85/#post-11831877) * Sorry meant to say “it’s not going to work” ^ Edited above. * Thread Starter [omris83](https://wordpress.org/support/users/omris83/) * (@omris83) * [6 years, 10 months ago](https://wordpress.org/support/topic/css-help-85/#post-11831879) * Thats why I wanted help with the CSS. Viewing 15 replies - 1 through 15 (of 23 total) 1 [2](https://wordpress.org/support/topic/css-help-85/page/2/?output_format=md) [→](https://wordpress.org/support/topic/css-help-85/page/2/?output_format=md) The topic ‘CSS Help’ is closed to new replies. ## Tags * [css](https://wordpress.org/support/topic-tag/css/) * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/) * 23 replies * 3 participants * Last reply from: [omris83](https://wordpress.org/support/users/omris83/) * Last activity: [6 years, 9 months ago](https://wordpress.org/support/topic/css-help-85/page/2/#post-11850124) * Status: not resolved ## Topics ### Topics with no replies ### Non-support topics ### Resolved topics ### Unresolved topics ### All topics