I wanted to create image upslide/animation on hover.
Just like we have the counter property →
Do we have any property(ies) through which we can achieve this →
w/o the javascript(because I do not know much about javascript)
w/o the javascript(because I do not know much about javascript)
Not sure what the goal is. 
Do you mean that the screen part of the laptop image is an image that should imitate a vertical scrolling on hover?
1 Like
Hi there @Erik_J,
Suppose we have a box of 200PX x 200 PX
The image needs to come into that box; Height can be any 500px or 1000px or anything.
when we hover the box will remain fixed, but the image will move vertically(scrolling on hover).
Image can be a website snapshot, for example.
Just a couple of points to consider.
(1) How will this work for those who can’t hover? e.g. Those using keyboard navigation or a touchscreen device?
(2) I find animations which work unexpectedly on hover like this very disorientating. I tend to trigger them accidentally and find the sudden movement confusing. Also, for people with coordination problems, it can be difficult either to avoid triggering the scroll, or to keep the mouse positioned to enable the scroll.
5 Likes
Hi there codeispoetry,
I agree with @TechnoBear in post #4.
You should avoid this trend for “arty farty” nonsense.
coothead
2 Likes
I was trying to emulate this. the image hover.
As I said, it’s keyboard inaccessible. (I don’t have a touchscreen device handy to see how it behaves there.) It’s also doubly-horrible from my point of view in that the movement is triggered before the mouse even reaches the image.
2 Likes
Why not study the code there?
You could start with these two properties:-
3 Likes
Hi there codeispoetry,
As you seem hell bent on taking the “arty farty” route
that seems to infest so many Wordpress sites here is
a simple example…
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<link rel="stylesheet" href="screen.css" media="screen">
<style media="screen">
body {
background-color: #f0f0f0;
font: 100% / 160% verdana, arial, helvetica, sans-serif;
}
#screen{
width: 50%;
padding-top: 31.25%;
margin: auto;
border:0.8em solid #000;
border-radius: 0.75em 0.75em 0 0;
background-image: url(https://demo.mythemeshop.com/s/a/writer/images/writer.jpg);
background-size: 100% auto;
cursor: pointer;
transition: background-position 5s linear;
}
#screen:hover{
background-position: 0 100%
}
#base{
width: 64.1%;
padding-top: 3.4%;
margin: auto;
background-image: url(https://demo.mythemeshop.com/s/a/writer/images/laptop.png);
background-size: 100% auto;
background-position: 0 100%
}
@media ( max-width: 30em ) {
#screen {
width: 15.56em;
padding-top: 9.725em;
}
#base{
width: 20em;
padding-top: 1.1em;
}
}
@media ( max-width: 22em ) {
#screen {
width: 13.2em;
padding-top: 8.25em;
}
#base{
width: 17em;
padding-top: 0.9em;
}
}
</style>
</head>
<body>
<div id="screen"></div>
<div id="base"></div>
</body>
</html>
If you get the time, perhaps you could tell me what
it’s purpose is, because I am unable to discern any. 
coothead
4 Likes
I believe it is being used to show a screenshot of website inside a fake screen image and then hovering shows the whole site as you would see if you scrolled an actual page.
This would seem to be a good use of the technique rather than showing a picture of the whole webpage which will take up a lot of room on the screen.
It should be fine on touch but is no real loss to others so I see no real accessibility issues. You can add a delay to the transition to stop accidental mouse hovering triggering the effect.
e.g.
3 Likes
Well, in my book that is a perfect description of “arty farty” nonsense. 
I am also rather surprised that you think…[quote]
This would seem to be a good use of the technique…
[/quote]
If I was a potential customer, then links to example pages
would be, to my mind, a much better method to employ. 
coothead
1 Like
On the page that @codeispoetry linked to, the small images are part of links to larger size demos. (I find the small images too small, and the scrolling too uncontrollable, for them to be of any use to me.)
In theory, the links are keyboard-accessible, but as they’ve added outline: none, it’s an uphill struggle to find and activate a link that way.
4 Likes
Yes of course you are free to have that opinion.
I think it’s much better than having the whole image displayed and cluttering the page and is good for a quick preview but of course should also be a link to the full page and higher quality image.
I hate it when I have to navigate to another page to see an image that is relevant to the context that I am reading about and wait for it to load when a simple quick preview would have done the job in the first place. Then I have to return the page and find the place I was originally reading to continue where I left off if I can still remember what I was reading about after navigation all over the place.
If I’ve learned anything over the years then its that there isn’t one answer to everything. User experience counts of course but not all users are the same and what works for one person may not work for another. There is no pleasing everybody whatever path you choose but it’s so easy to knock something than offer constructive criticism and trying to see both sides of the argument.
I like ‘arty-farty-nonsense’ when its done well.
6 Likes
And I very often code it, not because I have any particular liking
for it, but just for the possible benefits of the mental exercise.
coothead
5 Likes
And just to be clear you often do it very well:)
4 Likes
Hi there @coothead
No No. not stubborn was just exploring the options.
Sure,
I have a theme apart from header and footer, the middle section has this arrangement →
S-C-L
S stands for small width sidebar
C stands for main content
L stands for large sidebar(aside)
This can be arranged in 5 different ways +
2 ways when we absent small sidebar +
2 ways when we absent large sidebar +
1 w/o any sidebar i.e. full width. =9 total ways
For a different kind of settings, there are another 9 total ways.
So currently I have 18 demos to be shown.
One may argue that there are actually two Layouts/design, which are presented as looking like many based on the different possible sidebars arrangements(permutations).
that’s true. This is how the products are marketed to make it look functional so that they may look competitive with other products, which offers the same features.
Please go to this page.
You will realize that there are so many demos. so it becomes important that we at least give them an overview/notion of what this demo might look like w/o actually navigating the demo link. Those images that are currently looking similar can be replaced by the individual screenshots.
Buyers(or Marketers) Perspective vs Programmer Perspective
Buyers who normally are not coders have a comparison model. they will browse many themes and they compare based on design and functionality; If a theme X has a good design as compared to the theme Y, but seems very less functional as compared to theme Y then that’s the reason for not buying theme Y. So the products are actually inflated to market in a way to look more competitive and more functional through better demo’s.
(Marketing is like politics to an extent in a way that it also requires dirty warfare not just promoting your product, but killing someones else in a subtle way. For non-infinite numbers of the buyers, there are a big number of products feuding for the survival that too in a saturated industry like WordPress themes and plugins).
This is the reason why most of the marketing strategy doesn’t seem acceptable(and may look like the gimmick, irrelevant or not useful) to the ace developers. Nothing is absolute in the real world so both marketer(or perhaps buyer) and ace programmer are right in their framework.
If I make a blog for myself I would like to be as simple and as neat as this one → http://thesassway.com/beginner, for example.
Simplicity and neatness can be my norm of my selection, but complexity and functionality can be the norm of significantly huge number of people(buyers in case of the commercial products). I couldn’t assume that my shoe size will fit all.
but If I am making something with commercial and selling utility then this might be too simple and devoid of functionalities and attractive design that most of the buyers are generally seeking(Unless I distribute it absolutely free). This doesn’t apply to just layman w/o any technical understanding, but I have seen very well educated people when buy keeps the same parameters.
Ace developers perspective: He will not try to pollify code too much with the scripts as they may increase page loading time and thus impact page speed optimization. He may use a very simple layout with least complexity, but developing a competitive product(the one that can take edge) may require such complex implementation that may not fit optimization rules book because ultimately the product needs to build what buyer wants or what impresses the buyer on the comparison metrics based on so many similar products available in the market.
2 Likes
I have applied this in my live project
neither the black box is coming in center nor the image is centered in the black box. I tried margin: auto at many locations, but I couldn’t fix this.
May be width: 100%; is the culprit.
Alternatively,
May be this can work:
.screen {
width:90%}
.screen img {
width: 100%}
Try
.screen {margin: 20px auto;}
The image is 13.35px narrower than the frame. Change left: 0; to left: 7px;, and it will be as close to centred as it can get.
Ignore that. I hadn’t realised that the size of your black border increases at narrower screen widths, but the image remains the same size.
1 Like
what about this:
Do you think that the below is a full proof solution?
.screen {
width:90%}
.screen img {
width: 100%}
For now, I tried this on local and it works.
Question Paul,
Is it not important to reduce the number of DOM elements that are used for styling? The wrapper div could be removed with extra work.
There may be a way with only one image to make it scroll itself. With sprite images, using background-position allows to select only a part of the image. A CSS animation could be used if transform is not enough.
Besides, the absolute position refers to an absolute on the page. It may cause problems to use absolute, in particualr to relocate components on the page. In CSS, the position is not absolute by defualt for some reason.