I want to switch between to background-image attributes on hover, but the default transition is too fast and sharp and I would like to incorporate a fade opacity transition for both of them. I would like it to fade when I hover and also when I stop hovering when it get reset to the original background-image. Any ideas?
#HeaderLogo {
background: url('/logourl.png') no-repeat center;
background-size: contain;
display: block;
width: 800px;
height: 100px;
margin-left: auto;
margin-right: auto;
cursor: pointer;
}
#HeaderLogo:hover {
background: url('/hoverlogourl.png') no-repeat center;
}
You can fade your background-image in various ways for example you can use:
#HeaderLogo {
background: url('/logourl.png') no-repeat center;
background-size: contain;
display: block;
width: 800px;
height: 100px;
margin-left: auto;
margin-right: auto;
cursor: pointer;
-webkit-transition: background 0.5s linear;
-moz-transition: background 0.5s linear;
-o-transition: background 0.5s linear;
transition: background 0.5s linear;
}
#HeaderLogo:hover {
background: url('/hoverlogourl.png') no-repeat center;
}
You can use transition effect in HeaderLogo class
-webkit-transition: background-image 0.2s ease-in-out;
transition: background-image 0.2s ease-in-out;
#HeaderLogo {
background: url('/logourl.png') no-repeat center;
background-size: contain;
display: block;
width: 800px;
height: 100px;
margin-left: auto;
margin-right: auto;
cursor: pointer;
-webkit-transition: background-image 0.2s ease-in-out;
transition: background-image 0.2s ease-in-out;
}
Related
I am making paragraph data to appear when we hover over heading which is over image, the paragraph will as gradient from right side. Here the code help me please to write.
the data should be align to right side not covering the whole pagethis code
.align-center{
text-align: center;
display: inline-block;
margin:0 auto;
margin-bottom: 50px;
}
.image-cover-3{
margin: 0;
padding: 0;
width: 100%;
height: 250px;
line-height: 250px;
background-size: cover;
text-align: center;
background-image: linear-gradient(rgba(0, 0, 0, 0.7),rgba(100,167,87,.48)), url("https://i.ibb.co/HK8v8W3/buiding.jpg");
}
.head-size-2{
font-size: 40px;
}
.rearrange-img{
display: inline-flex;
vertical-align: middle;
line-height: normal;
position: relative;
color: aliceblue;
}
.image-cover-3:hover .head-size-2{
opacity: 0;
-webkit-transition: opacity 300ms;
-moz-transition: opacity 300ms;
-o-transition: opacity 300ms;
transition: opacity 300ms;
}
.image-cover-3 .head-size-3{
opacity: 0;
font-size: 20px;
display: flex;
vertical-align: middle;
color: aliceblue;
top: -150px;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
background-image: linear-gradient(rgba(1, 0, 0, 0.4),rgba(100,167,87,.48));
height: 100%;
width: 1200px;
}
.image-cover-3:hover .head-size-3{
opacity: 0.8;
}
Welcome to SO! I think this is what you want
.align-center{
text-align: center;
display: inline-block;
margin:0 auto;
margin-bottom: 50px;
}
.image-cover-3{
margin: 0;
padding: 0;
width: 100%;
height: 250px;
line-height: 250px;
background-size: cover;
text-align: center;
background-image: linear-gradient(rgba(0, 0, 0, 0.7),rgba(100,167,87,.48)), url("https://i.ibb.co/HK8v8W3/buiding.jpg");
position: relative;
}
.head-size-2{
font-size: 40px;
}
.rearrange-img{
display: inline-flex;
vertical-align: middle;
line-height: normal;
position: relative;
color: aliceblue;
}
.image-cover-3:hover .head-size-2{
opacity: 0;
-webkit-transition: opacity 300ms;
-moz-transition: opacity 300ms;
-o-transition: opacity 300ms;
transition: opacity 300ms;
}
.image-cover-3 .head-size-3{
opacity: 0;
font-size: 20px;
display: flex;
vertical-align: middle;
color: aliceblue;
top: 0px;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
background-image: linear-gradient(rgba(1, 0, 0, 0.4),rgba(100,167,87,.48));
height: 100%;
width: 100%;
POSITION: ABSOLUTE;
LEFT: 0;
RIGHT: 0;
align-items: center;
}
.image-cover-3:hover .head-size-3{
opacity: 0.8;
}
<section><div class="image-cover-3">
<h2 class="rearrange-img head-size-2">About the International Confrence on Industry 4.0 & Circular Economy</h2>
<div class="align-center rearrange-img head-size-3">
The conference widens the scope of bringing together innovators, researchers and industries under common goal – creating, evaluating, implementing and benefiting from innovations. It will thus support innovative projects in Mechanical engineering and bring benefits to all involved participants
</div>
</div>
</section>
I'm trying to make an image clickable so that I can use it as a button to download a PDF although I feel like I'm over-thinking this and confusing myself.
An example of the code I've used:
<div id="name"></div>
The div id is then used with CSS to display the image as I also wanted a hover effect so the user has some sort of feedback when on the button.
#name {
background-image: url('standardimage.jpg');
height: 51px;
width: 285px;
margin: auto;
margin-bottom: 5px;
}
#name:hover {
background-image: url('hoverimage.jpg');
height: 51px;
width: 285px;
margin: auto;
margin-bottom: 5px;
cursor: pointer;
-o-transition: .5s;
-ms-transition: .5s;
-moz-transition: .5s;
-webkit-transition: .5s;
}
Any help would be appreciated thank you!
So the problem you are facing is the the link (the <a> tag) is the actual button but that one has no size cause it's kind of empty. See this code snippet. The <a> tag has a red border all around but there is nothing which fills it up ...
#name {
background-image: url(http://lorempixel.com/400/200/sports/1/);
height: 51px;
width: 285px;
margin: auto;
margin-bottom: 5px;
}
#name:hover {
background-image: url(http://lorempixel.com/400/200/sports/2/);
height: 51px;
width: 285px;
margin: auto;
margin-bottom: 5px;
cursor: pointer;
-o-transition: .5s;
-ms-transition: .5s;
-moz-transition: .5s;
-webkit-transition: .5s;
}
#name a {
border:solid 1px red;
background-color: orange;
z-index: 999;
}
<div id="name"></div>
So if you set all those styles you had to the <a> tag and add display: inline-block; then it will work see here:
#name a {
display: inline-block; /* add this line */
background-image: url(http://lorempixel.com/400/200/sports/1/);
height: 51px;
width: 285px;
margin: auto;
margin-bottom: 5px;
}
#name a:hover {
background-image: url(http://lorempixel.com/400/200/sports/2/);
height: 51px;
width: 285px;
margin: auto;
margin-bottom: 5px;
cursor: pointer;
-o-transition: .5s;
-ms-transition: .5s;
-moz-transition: .5s;
-webkit-transition: .5s;
}
#name a {
border:solid 1px red;
background-color: orange;
z-index: 999;
}
<div id="name"></div>
I am trying to build a page using bootstrap and css where when a mouse pointer is placed on an image, the image will fade and the background image will show. Image fades fine but does not fit though all of them is 100px in size(in all dimensons) and white space is seen.Link:http://codepen.io/Ishtiaque/pen/ONPRyp?editors=1100
Here is my code:
<div class="portfolio">
<h2>Portfolio</h2>
<div class="row position">
<div id="project1" class="col-xs-6">
<img src="http://thumb1.shutterstock.com/display_pic_with_logo/3617441/376416154/stock-vector-phonebook-icon-phonebook-icon-eps-phonebook-icon-vector-phonebook-icon-eps-phonebook-icon-jpg-376416154.jpg">
</div>
<div id="project1" class="col-xs-6">
<img src="http://thumb1.shutterstock.com/display_pic_with_logo/3617441/376416154/stock-vector-phonebook-icon-phonebook-icon-eps-phonebook-icon-vector-phonebook-icon-eps-phonebook-icon-jpg-376416154.jpg">
</div>
</div>
</div>
CSS part:
#project1 {
background-image: url("https://t1.ftcdn.net/jpg/00/33/60/96/160_F_33609643_L3xInzQroBP4PX8zaZICZqofvvfRxZW9.jpg");
background-size: 100px;
width: 100px;
height: 100px;
}
#project1 img {
width: 100px;
height: 100px;
-webkit-transition: all ease 1s;
-moz-transition: all ease 1s;
-o-transition: all ease 1s;
-ms-transition: all ease 1s;
transition: all ease 1s;
}
#project1 img:hover {
opacity: 0;
}
.portfolio {
padding-top: 50px;
overflow: auto;
background: url(http://4k-background.com/highresolution/l_011.jpg)no-repeat center center fixed;
background-size: cover;
height: 500px;
}
.position {
padding-left: 70px;
}
Just tweaked with ur codepen and fixed it, there was padding on the div in the background. I set padding: 0px; and its good now.
CSS
#project1{
background-image:url("https://t1.ftcdn.net/jpg/00/33/60/96/160_F_33609643_L3xInzQroBP4PX8zaZICZqofvvfRxZW9.jpg");
background-size: cover;
padding: 0px;
}
#project1 {
-webkit-transition: all ease 1s;
-moz-transition: all ease 1s;
-o-transition: all ease 1s;
-ms-transition: all ease 1s;
transition: all ease 1s;
}
#project1 img:hover {
opacity: 0;
}
.portfolio{
padding-top:50px;
overflow:auto;
background:url(http://4k-background.com/highresolution/l_011.jpg)no-repeat center center fixed;
background-size:cover;
height:500px;
}
.position{
padding-left:70px;
}
.image {
width: 120px;
height: 100px;
}
Just replace your CSS with this.
EDIT: Oh, by the way, add the class="image" to both image tags
This question already has answers here:
CSS3 background image transition
(13 answers)
Closed 7 years ago.
CSS
.navbar-brand {
display: block;
margin: 0; padding: 0;
height: 80px;
width: 70px;
background: url('img/logo_orig.png') no-repeat center center;
background-size: 100% auto;
}
.navbar-brand:hover {
background: url('img/logo_hov.png') no-repeat center center;
background-size: 100% auto;
}
This creates a button with a background image, when hovered it hnages the background.
I want to add a delay to the background image when hovered. similar to using
transition: background-color 0.35s ease;
You can use something like this.
HTML:
#cf {
position: relative;
height: 281px;
width: 450px;
margin: 0 auto;
}
#cf img {
position: absolute;
left: 0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
height:inherit;
width:inherit;
}
#cf img.top:hover {
opacity: 0;
}
<div id="cf">
<img class="bottom" src="http://www.psdgraphics.com/file/colorful-triangles-background.jpg" />
<img class="top" src="http://cdp.pasctunisie.org/wp-content/uploads/2015/05/light-circles-wave-powerpoint-backgrounds.jpg" />
</div>
i am trying to animate a div when hovering on another div. Ihave following code
html
<div>
</div>
<div class="content">
</div>
css
div {
height: 100px;
width: 100px;
background: red;
transition: all 0.4s ease-in-out;
}
.content {
height: 20px;
width: 20px;
background: green;
display: none;
}
div:hover + .content{
display: block;
margin-top: -100px;
margin-left: 50px;
}
What i am trying to do is, i need to animate .content to margin-top: -100px and margin-left: 50px; from its default position, when the user is hover on one of these elements. But atm with this code it only works when the user hover on the .content and it animate the other way. (from margin-top: -100px and margin-left: 50px; to default position). Please excuse my english
jsfiddle-> http://jsfiddle.net/fTAUk/1/
You need to wrap the content in the div and use a child selector. Note I gave the larger div an id as well. Here is the css:
JS Fiddle
#box {
height: 100px;
width: 100px;
background: red;
position: absolute;
transition: all 0.4s ease-in-out;
}
#content {
width: 20px;
background: green;
height: 0;
transition: all 0.4s ease-in-out;
position: margin-top: -100px;
margin-left: 50px;
-webkit-transition: all .8s ease;
-moz-transition: all .8s ease;
-ms-transition: all .8s ease;
-o-transition: all .8s ease;
transition: all .8s ease;
}
#box:hover > #content {
height: 20px;
}