is the any solution for a pure CSS3 / HTML Thumbnail Zoomer?
2 Solutions would be Ok: A popup Window, or another Div remaining in the Site + showing the current hovered area of the thumbnail picture.
But it has to be without js for eBay.
Many thanks.
You could do this
#yourDiv:hover {
transform: scale(5);
}
The image might be a tad blurry. But give it a try and see how it works.
Or another option would be to create another div and then add the following css
#anotherDiv {
width: 800px; /* use whatever width you want, can be px or % */
height: 500px; /* use whatever height that works */
display: none; /* this will hide it from appearing until the user hovers over the thumbnail #yourDiv */
}
#yourDiv:hover #anotherDiv {
display: block; /* this will show it when they hover over thumbnail #yourDiv */
}
Related
I have a jquery datatable where I create custom logic to display a custom style that I require when the header column lable is in hover state.
This is my fiddle:
/* UPDATE FIDDLE WAS NOT THE LAST ONE */
https://jsfiddle.net/y1b6puhn/
What I need is that the sorting icon is inside my rounded rectangle so it looks fluent and smooth.
So I would like to have something like this where the sorting icon is moved to left a little bit so when you hover you see it in the same position but on top of my rounded rectangle style.:
I edit your .table-rounded-header a little and it seems to solve it:
#example .table-rounded-header {
border-radius: 25px;
background: #dcd9d9;
padding: 5px;
height: auto; /* for more the one line headers */
width: 85%; /* instead of 100% */
text-align: center; /* make it look nicer */
}
Hope that solve it.
Here I have create one div box using css stlye.
Fiddle: Correct view
But if the description is small then content misaligned as below:
Misaligned box
i tried changing the position and css values, but no luck.
Can some one tell me how can I keep footer part on it's position even if the content is small.
You need to clear the floats:
.footer-working-area {
clear:both; /* this sets the element flow back to normal */
background: transparent url(...) left 5px repeat-x;
/* /\ have some padding for the img */
}
Now the footer always stays below the picture, no matter how few text content you have.
Here you have the accordingly modified example fiddle.
You can give your text a min-height...
.text { min-height: 110px; }
... or a height if you don't expect longer texts
.text { height: 110px; }
... or clear the floats as Christoph mentioned in an other answer.
Add clearfix to the .text class
.text::after {
content: "";
display: block;
clear: both;
}
EXAMPLE
I've got the following class, which works in all the major browsers except Firefox for PC. Specifically the issue is with the content being on a regular element—Ffx doesn't seem to like it on anything except a ::before or ::after pseudo-element. Trouble is, ::after does not inherit the size of its base element.
html
<span class="col-3 myImg"></span>
css
.col-3 {
width: 25%;
}
.myImg {
/* content: url('img.png'); works in everything by Ffx on PC */
display: block;
position: relative;
}
/* v Needed for Ffx on PC */
.myImg::after {
background: red;
content: url('img.png');
display: block;
max-width: 100%; /* affects only the background colour */
position: absolute;
width: 100%; /* affects only the background colour */
}
I don't want to set a height—I want the height to stay proportional to the width (which is determined by col-# from bootstrap v3).
I don't want to use a bunch of image tags because that means an update will require a bunch of edits (instead of one central one to the css).
Related SO question: Can I change the height of an image in CSS :before/:after pseudo-elements?
JS Fiddle
EDIT I want the image to be 100% the width of the base element (the span) and the image's height to scale proportionately.
I am developing a website and the problem is that when I resize the browser (horizontaly), my HOME link from the menu gets broken. It's harder to explain in words what happens, so check it out here: http://www-user.tu-cottbus.de/~carbusor/Red%20Diamond/html/index.html.
The grey background is an image, having the up-right corner cut. After I cut that area, I made the area transparent. So, it is a trapezoid on transparent background.
My question is: what to do to prevent the trapezoid transforming into a rectangle when resizing?
If you want something like that.
Where the diamond is in between the two tabs then you should give particular width to your li elements(All).not use percentages for that. Like this
.menu > li#home {
display: inline;
float: left;
background: none;
background-image: url(../img/home.png);
width: 273px; /* same as your image size */
}
and also to both of your header images
img#logo {
position: absolute;
top: 10px; /* Change it as it sets in the gap */
left: 250px; /* Change it as it sets in the gap */
width: 140px;
height: 90px;
}
Instead of using an image, create the shape you want right in the file. Try this link:
Using the Area Shape Attribute
I'm using a responsive wordpress theme that is based on twitter bootstrap. For some reason the side bar images aren't resizing correctly. (You can see what I mean by checking out the [site][1] and trying to resize.) I was approaching this by declaring a fixed size to the widget, and then positioning the form inside it using absolutely relative positioning. The image / contact form looks fine when you are on a desk top but as you compress the layout (for instance on an iphone) the contact form and image do not resize correctly. I'm not sure where to go from here and sort of stuck.
Here's the css I'm using now (which may not be correct.) Thanks!
.widget .signupForm {
/* Box always has colour, pic always on right */
background-color: #06d0d2;
background-image: url(http://noahsdad.com/wp-content/uploads/2012/05/noahs-dad-side-bar.jpg);
background-position: right bottom;
background-repeat: no-repeat;
/* height ensures full pic is shown */
height: 300px;
/* allow us to position contents */
position: relative;
}
/* Absolutely position the form within the widget */
.widget .signupForm form {
position: absolute;
right: 160px;
bottom: 0px;
}
.widget .signupForm form input {
display: block;
}
#media screen and (min-width: 768px) {
/* now just resize the widget box and move the form */
.widget .signupForm {
width: 300px;
height: 240px;
background-size: 100%;
}
.widget .signupForm form {
right: 120px;
bottom: 0px;
}
I can detect 3 problems at a width of 800px:
.widget .signupForm has a width of 300px. It should be auto or 100%. Then form elements are to be sized accordingly, if needed (btw the submit button has same text and background than the text input. It seems we have 2 informations to type when in fact it's the action button. It doesn't need to be white on blue, maybe a darker grey would be sufficient. I'm not a designer, though ;) )
Facebook widget has a fixed width. Does it exist a mobile version of this widget?
same problem with the Instagram one: images have an HTML width attribute of 300 (pixels).
The Following css applies to your page when it gets resized. Not sure which file is applying it.Find this class in your css files and add a width to it, say width:300px if you want it to be a perfect square or any other value.
.widget .signupForm {
background-color: #06D0D2;
background-image: url("http://noahsdad.com/wp-content/uploads/2012/05/noahs-dad-side-bar.jpg");
background-position: right bottom;
background-repeat: no-repeat;
height: 300px;
width:300px; /* code added here */
position: relative;
}
Hope it helps,if i havnt understood ur problem or this is not the solution you were looking for - do comment..