A member of this forum was kind enough to provide the following CSS rollover code which is "fluid" and can adjust in dimensions based on browser size. I've included the code below along with Jfiddle link:
CSS
.container {
width: 100%;
height: 300px;
background: #f1f1f1;
}
a.widgetbook {
display:block;
max-width: 369px;
max-height: 85px;
width: 100%;
height: 100%;
background: url("http://69.195.124.70/~profetz4/wp-content/themes/artificer/images/btn-contact.jpg") no-repeat left top;
margin-bottom: 6px;
background-size: 200%;
}
a.widgetbook:hover {
background-position: right top;
}
HTML
<div class="container">
<a href="#" class="widgetbook">
</a>
</div>
http://jsfiddle.net/cw6hN/
I'm looking to apply a fade-in CSS transition that will position the rollover image properly, and then fade in with an opacity of 1. I'm able to do this to a standard button (non-responsive) but haven't figured out how to apply it to the button scenario above. Any help on how to best achieve this would be most appreciated.
Thanks in advance!
D
Updated JSFiddle to how you wanted it, but using 2 separate images.
Add this to a.widgetbook
transition:all .6s;
JSFiddle
To get the 'fade in' affect you're looking for, you'll need to create two different images.
Related
This is my first question so I'm probably gonna miss something. Please tell me if you need any additional information.
I am trying to create a sliced image overlaying another image and when you hover any of the slices it will disappear and show the underlying picture. What I've done is that I have created several divs that represents each slice and then used a fixed background position so the overlaying image looks whole.
I've made the concept work, but I'm having some trouble adjusting the positioning of the overlaying picture. Since I'm using fixed background positioning the overlaying picture doesn't work in a responsive environment, that is if I don't position the image in the top left corner. But if I remove the fixed positioning I haven't been able to create a seamless sliced picture.
Can this be solved or am I approaching this problem the wrong way entirely? Thanks for your help!
Here is a codepen of what I've done https://codepen.io/renryl/pen/MzJjpd.
body {
margin-left: 50px;
}
$itemWidth: 20px;
$foreground-image: 'https://i.warosu.org/data/biz/img/0022/15/1495964000552.jpg';
$background-image: 'https://vignette.wikia.nocookie.net/wiiu/images/5/5e/New-Super-Mario-Bros-Art-21-400x400.jpg/revision/latest?cb=20121029024830';
.background-picture {
max-width: 400px;
height: 400px;
overflow: hidden;
background: rgba(#424242,.5) url($background-image) no-repeat;
border-radius: 50%;
}
.foreground-picture {
width: $itemWidth;
height: 100%;
display: inline-block;
transition: all 1.5s ease-in-out;
background: rgba(#424242,.5) url($foreground-image) no-repeat fixed;
&:hover{
transition: all 0s linear;
opacity:0;
}
}
<html>
<body>
<div id="app">
<picture inline-template>
<div class="background-picture">
<div v-for="i in numberOfSlices" :key="i" class="foreground-picture"></div>
</div>
</picture>
</div>
</body>
</html>
Vue.component('picture', {
data() {
return {
numberOfSlices: 20
}
}
});
var vm = new Vue({
el: '#app'
});
If i understand, You need both of these properties:
background-position: center;
This will center your image to your div.
background-size: cover;
The background-size cover will fit to the content and cover it all
I want to display image through CSS. But it is not displaying correctly. Can anyone help me to know that how can we display full size image in our browser without giving dam height property.
Thanks in advance.
Here is my markup:
<div class="Main_Content">
<div class="Slider">
</div>
Here is the CSS (not working)
.Main_Content {
width: 100%;
}
.Slider {
background-image: url("Construction%20Company/Stock%20Images/MG_5194-e1348062448312.jpg");
display: flex;
float: left;
height: 300px;
position: unset;
width: 100%;
}
.Slider {
background-size:cover;
background-repeat:no-repeat;
}
Will do the job. It will try to make the images as big until it reaches fullscreen.
See background-size property on MDN for more details.
Without using height use,
<img>
tag. This will definitely solve your issue.
I've looked around but it doesn't help that I don't even know the name of the effect.
What is the effect called which has a transparent div section with a large image behind it. It's similar to a paralax effect but I don't think it falls under that category.
Please see here: http://shield.nvidia.co.uk/
At the "All you favourite games to go." section.
I've seen it on lots of sites.
Another example here: http://www.wekeroad.com/
If I can at least know what the effect is named I can proceed to learn it.
Edit: Thanks guys, I thought it was some fancy effect. It's very simple, I made my own too just playing around: http://jsfiddle.net/uuepunx8/
html, body{
height: 100%;
width: 100%;
}
*{
padding: 0;
margin: 0;
}
.first{
width: 100%;
height: calc(100% + 100px);
background-color: red;
}
.second{
height: 50%;
background: url('http://hdwallpaper.freehdw.com/0004/3d-abstract_hdwallpaper_equations_33432.jpg') fixed 0 0;
}
Setting a main container's background to position:fixed; is what you're looking for. Your internal content will need to be big enough to scroll and have something breaking up the content, such as a margin-bottom: 300px:
.background{
background: url(http://lorempixel.com/300/300/) repeat;
background-size: cover;
position: fixed;
height: 100%;
width: 100%;
}
Here is a simple JSFiddle to play with.
I don't know the name, but that effect is not hard to implement using CSS.
All you have to do is add a background image to each of your scrolling divs (or other element type structuring your page) setting the background-attachment to "fixed".
i want to change the background position and in front of that a img at the same time.
I have a bad solution used a second div and centered it with padding. But when i mouse over the padding of the first div the picture dont change the picture.
#contentright {
height: 58px;
width: 256px;
overflow:hidden;}
I've made a fiddle exemplifying my scenario. JSFIDDLE
Any solution how i can fix that? Greetz
check in fiddle
.logo {
width: 100%;
height: 100%;
background:url(http://s1.directupload.net/images/140101/hy2cqqkj.png) 0 0 no-repeat;
background-position: center center;
}
in logo class
I have a header in a HTML page that contains a curve.
My Problem: The curve is a picture & it sits at the highest z-index. It is meant to cut off some text below it so it has the highest z-index. As a result, none of the links below the image(curve) can be clicked because the picture sits on top of them.
Heres the simple JSFiddle: http://jsfiddle.net/hE7D5/2/
How can I get my links below the image to be clickable?
The easiest way I know is to make the image have the css: pointer-events: none; BUT this doesn't work in IE & I am looking for the most Cross-Browser friendly solution.
<div id="headerContainer" style="position: relative; width: 100%; text-align: center; background-color: yellow;">
<div id="header" style="width: 1100px; height: 400px; padding-left: 30px; padding-right: 30px;">
<ul id="navbar" style="background-color: red; width: 800px; height: 40px; float: left;"></ul>
<a id="logo" href="www.google.com" style="background-color: red; width: 190px; height: 40px; float: right; margin-top: 15px;">Cant be Clicked</a>
<br/>
<div id="cutOffText">
<p style="padding: 0; margin: 0; font-size: 200px;">ABCDEFG</p>
</div>
</div>
<div id="curveOverlay" style="z-index: 1; position: absolute; left: 0; top: 0; background-image: url('http://i44.tinypic.com/rs8y7m.png'); background-position: center bottom; background-repeat: no-repeat; width: 1100; height: 400px;">
</div>
</div>
PS: If theres no way to make the links clickable when under the image, can you suggest a HTML layout I can use to still achieve my look but also have my navbar links clickable?
You could have your elements, that currently sit under the graphic, be on top of it with their backgrounds set to be mostly transparent. This way, the text would be above the image, whereas the background color would seem to be behind or inline with the graphic.
If you are able to precisely control the layout of what's behind the image, you could duplicate that layout above the image using "empty" links with the same dimensions (which I've outlined with a dashed green line in the image below).
In your example you might be able to use cssSandpaper to rotate the image of the curve.
If you slightly modify your curve the button will become totally clickable.
Isn't this working?
#logo {
position: relative;
z-index: 10;
}
simply put : you can't. not without a lot of effort. to achieve this effect, you'd need the image to be a imagemap and then make sure that it's pixel-perfect to the stuff that it's obscuring.
to be honest, this looks like a pretty bad idea, but you may have some legitimate reason to do this
EDIT : looks like a duplicate of this