CSS Help

  • 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.

    The page I need help with: [log in to see the link]

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

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    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

    (@omris83)

    Hi Andrew,

    Like this

    Kind Regards

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    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

    (@omris83)

    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

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    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

    (@omris83)

    Its on every page. I’m referring to all the images in the boxes that have ‘downloads’

    You cant miss the images.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    There’s nothing on the homepage with “downloads”

    Thread Starter omris83

    (@omris83)

    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

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    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

    (@omris83)

    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

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    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

    (@omris83)

    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

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    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.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Sorry meant to say “it’s not going to work” ^ Edited above.

    Thread Starter omris83

    (@omris83)

    Thats why I wanted help with the CSS.

Viewing 15 replies - 1 through 15 (of 23 total)
  • The topic ‘CSS Help’ is closed to new replies.

Tags