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>
Related
I'm trying to change the text on hover, it works, but I'm wondering why the text goes to the right when you unhover the div.
I want to make the same effect when you unhover the div. Is it because the position absolute? I'm pretty new to web development.
.article-title {
opacity: 1;
width: 24%;
position: absolute;
padding-bottom: 10px;
color: #ff0099;
font-size: 30px;
transition: all .5s ease-in-out, width 0s linear, absolute 0s linear;
}
.article-desc {
width: 23%;
position: absolute;
opacity: 0;
transition: all .5s ease-in-out, width 0s linear, absolute 0s linear;
}
.box-link {
display: flex;
flex-direction: column;
padding: 10px;
border: 2px solid black;
border-radius: 10px;
height: 200px;
width: 25%;
text-align: center;
cursor: pointer;
transition: transform .5s, box-shadow .2s;
}
.box-link:hover {
transform: scale(1.15);
box-shadow: 0 0 51px rgba(33, 33, 33, .4);
}
.box-link:hover .article-title {
width: 89%;
position: absolute;
opacity: 0;
}
.box-link:hover .article-desc {
width: 95%;
opacity: 1;
}
<div class="box-link article-1">
<a class="article-title">The ultimate guide to Australian native flowers</a>
<a class="article-desc">Looking to add a touch of Australiana when building a bouquet or growing your garden? There are so many stunning Australian native flowers to choose from.</a>
</div>
Change your CSS to :
.article-title {
opacity: 1;
position: absolute;
padding-bottom: 10px;
color: #ff0099;
font-size: 30px;
transition: all .5s ease-in-out, width 0s linear, absolute 0s linear;
}
.article-desc {
position: absolute;
opacity: 0;
transition: all .5s ease-in-out, width 0s linear, absolute 0s linear;
}
.box-link {
display: flex;
flex-direction: column;
padding: 10px;
border: 2px solid black;
border-radius: 10px;
height: 200px;
width: 25%;
text-align: center;
cursor: pointer;
transition: transform .5s, box-shadow .2s;
position: relative;
}
.box-link:hover {
transform: scale(1.15);
box-shadow: 0 0 51px rgba(33, 33, 33, .4);
}
.box-link:hover .article-title {
position: absolute;
opacity: 0;
}
.box-link:hover .article-desc {
opacity: 1;
}
<div class="box-link article-1">
<a class="article-title">The ultimate guide to Australian native flowers</a>
<a class="article-desc">Looking to add a touch of Australiana when building a bouquet or growing your garden? There are so
many stunning Australian native flowers to choose from.</a>
</div>
The idea is to make the parent position relative so that you no longer need width explicitly to containerize the childs.
I have a dropdown navigation system on my website, and it works fine, but I noticed that when I hovered below the dropdown text it would display the dropdown anyway. (jsfiddle of before) I wanted to change that, so I tried changing #dropdown:hover #dropdown-content to #dropdown p:hover #dropdown-content. But I am not getting any results.
#nav-container {
display: table;
margin: 0 auto;
}
#navigation {
height: 100px;
padding: 10px 3px 3px;
background-color: #D3D3D3;
position: sticky;
}
#nav-items {
list-style-type: none;
margin-left: -45px;
}
#nav-items li {
display: inline-block;
vertical-align: top;
width: 400px;
}
#group1 {
display: inline-block;
}
#dropdown {
display: inline-block;
position: relative;
text-align: center;
}
#dropdown p {
font-family: 'Work Sans', sans-serif;
font-size: 35px;
letter-spacing: 5px;
margin: auto auto auto auto;
}
#dropdown-content {
position: absolute;
margin: 10px auto auto auto;
left: 0;
right: 0;
opacity: 0;
height: auto;
background-color: #575757;
border-radius: 8px;
box-shadow: 0px 0px 6px 0px #D3D3D3;
z-index: 1;
overflow-y: hidden;
transition-property: all;
transition-duration: 0.5s;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
#dropdown-content img {
margin-bottom: 5px;
user-drag: none;
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
}
.nav-dropdown-container {width: 400px;}
#dropdown-content p {
font-size: 20px;
font-family: 'Work Sans', sans-serif;
font-size: 30px;
letter-spacing: 2px;
}
#dropdown p:hover #dropdown-content { /* CHANGES HERE */
opacity: 1;
max-height: 500px;
padding-top: 1em;
padding-bottom: 1em;
-webkit-transition: max-height 0.5s ease-in-out;
-moz-transition: max-height 0.5s ease-in-out;
-o-transition: max-height 0.5s ease-in-out;
transition: max-height 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
display: block;
}
<nav id="navigation">
<div id="nav-container">
<center>
<ul id="nav-items">
<li>
<div id="group1">
<div class="nav-dropdown-container">
<div id="dropdown">
<p>Test</p>
<div id="dropdown-content">
<p>Test</p>
</div>
</div>
</div>
</div>
</li>
</ul>
</center>
</div>
</nav>
I have tried everything, from putting the p element in it's own div to putting the p element in the ul element. Any help would be appreciated.
You should use this CSS selector #dropdown>p:hover ~ #dropdown-content :
#nav-container {
display: table;
margin: 0 auto;
}
#navigation {
height: 100px;
padding: 10px 3px 3px;
background-color: #D3D3D3;
position: sticky;
}
#nav-items {
list-style-type: none;
margin-left: -45px;
}
#nav-items li {
display: inline-block;
vertical-align: top;
width: 400px;
}
#group1 {
display: inline-block;
}
#dropdown {
display: inline-block;
position: relative;
text-align: center;
}
#dropdown p {
font-family: 'Work Sans', sans-serif;
font-size: 35px;
letter-spacing: 5px;
margin: auto auto auto auto;
}
#dropdown-content {
position: absolute;
margin: 10px auto auto auto;
left: 0;
right: 0;
opacity: 0;
height: auto;
background-color: #575757;
border-radius: 8px;
box-shadow: 0px 0px 6px 0px #D3D3D3;
z-index: 1;
overflow-y: hidden;
transition-property: all;
transition-duration: 0.5s;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
#dropdown-content img {
margin-bottom: 5px;
user-drag: none;
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
}
.nav-dropdown-container {width: 400px;}
#dropdown-content p {
font-size: 20px;
font-family: 'Work Sans', sans-serif;
font-size: 30px;
letter-spacing: 2px;
}
#dropdown>p:hover ~ #dropdown-content {
opacity: 1;
max-height: 500px;
padding-top: 1em;
padding-bottom: 1em;
-webkit-transition: max-height 0.5s ease-in-out;
-moz-transition: max-height 0.5s ease-in-out;
-o-transition: max-height 0.5s ease-in-out;
transition: max-height 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#dropdown:hover #dropdown-content {
display: block;
}
<nav id="navigation">
<div id="nav-container">
<center>
<ul id="nav-items">
<li>
<div id="group1">
<div class="nav-dropdown-container">
<div id="dropdown">
<p>Test</p>
<div id="dropdown-content">
<p>Test</p>
</div>
</div>
</div>
</div>
</li>
</ul>
</center>
</div>
</nav>
Add this in your css selector : ~
it's going to be like that now:
#dropdown p:hover ~ #dropdown-content { /* CHANGES HERE */
opacity: 1;
max-height: 500px;
padding-top: 1em;
padding-bottom: 1em;
-webkit-transition: max-height 0.5s ease-in-out;
-moz-transition: max-height 0.5s ease-in-out;
-o-transition: max-height 0.5s ease-in-out;
transition: max-height 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
display: block;
}
I want a Button, with 2 elements in it, to slide the Background.
But I want both elements to center vertical and get height 100% even when the other element is bigger.
Here is the HTML
<button class="btn-cstm-slide">
<div class="btn-cstm-slide-logo"><span>Test Test 14343</span></div>
<div class="btn-cstm-slide-text">
<span>Just a Testtest</span>
<br/>
<span>Let's see</span>
</div>
</button>
And here the CSS
.btn-cstm-slide {
height: 100%;
padding: 0px;
display: flex;
position: relative;
text-decoration: none;
overflow: hidden;
background: #333C42;
border: none;
box-shadow: 0px 1px 1px rgba(0,0,0,.1);
}
.btn-cstm-slide-logo {
height:100%;
min-height:100%;
margin: 0;
padding: 10px;
position: relative;
text-decoration: none;
background: #474f54;
color: #fff;
}
.btn-cstm-slide-text {
padding: 10px;
position: relative;
text-decoration: none;
background: #333C42;
color: #fff;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.btn-cstm-slide-text * {
position:relative;
}
.btn-cstm-slide-text:before {
content: "";
position: absolute;
height: 100%;
width: 0;
bottom: 0;
left:0;
background-color: #474f54;
-webkit-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.btn-cstm-slide-text:hover:before {
width: 100%;
}
Demo
FIDDLE
Can you help me? :(
Is this what you had in mind?
https://jsfiddle.net/e07uc4kj/9/
.btn-cstm-slide {
height: 100%;
padding: 0px;
display: flex;
position: relative;
text-decoration: none;
overflow: hidden;
background: #333C42;
border: none;
box-shadow: 0px 1px 1px rgba(0,0,0,.1);
}
.btn-cstm-slide-logo {
padding: 10px;
min-width: 80px;
position: absolute;
top: 0px;
bottom: 0px;
text-decoration: none;
background: #474f54;
color: #fff;
vertical-align: middle;
}
.btn-cstm-slide-text {
margin-left: 100px;
padding: 10px;
position: relative;
text-decoration: none;
background: #333C42;
color: #fff;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.btn-cstm-slide-text:before {
content: "";
position: absolute;
height: 100%;
width: 0;
bottom: 0;
left:0;
background-color: #474f54;
-webkit-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.btn-cstm-slide-text:hover:before {
width: 100%;
}
I'm using the Instafeed.js plugin and trying to style the "likes" hover overlay to fill the entire image box, however, I'm struggling to set the height to 100%.
I'm trying to avoid setting the container's height to a pixel value since the entire plugin is currently responsive.
I've looked around and tried different combinations of display and position values, but it's been mostly trial and error.
CSS:
#instafeed {
width: 100%;
margin-bottom: 80px;
}
#instafeed a {
position: relative;
}
#instafeed .ig-photo {
width: 25%;
vertical-align: middle;
}
#instafeed .likes {
width: 100%;
height: auto;
top: 0;
left: 0;
right: 0;
position: absolute;
background: #f18a21;
opacity: 0;
font-family: 'LinotypeUniversW01-Thin_723604', Arial, sans-serif;
font-size: 28px;
color: #ffffff;
line-height: 100%;
text-align: center;
text-shadow: 0 1px rgba(0, 0, 0, 0.5);
-webkit-font-smoothing: antialiased;
-webkit-transition: opacity 100ms ease;
-moz-transition: opacity 100ms ease;
-o-transition: opacity 100ms ease;
-ms-transition: opacity 100ms ease;
transition: opacity 100ms ease;
}
#instafeed a:hover .likes {
opacity: 0.8;
}
Demo: http://jsfiddle.net/rc1wj5t9/
Any help/advice would be appreciated!
It's because the anchor elements are inline by default, which means that they are not inheriting the height of their children img elements.
One possible solution is to set the display of the anchor elements to inline-block, and specify a width of 25%. Then for the children img elements, set a max-width of 100%:
Updated Example
#instafeed a {
position: relative;
display: inline-block;
max-width: 25%;
}
#instafeed .ig-photo {
max-width: 100%;
vertical-align: middle;
}
#instafeed .likes {
width: 100%;
height: auto;
top: 0; right: 0;
bottom: 0; left: 0;
}
To center the text, I used one of the techniques for vertically/horizontally centering text from one of my previous answers.
#instafeed .likes > span {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
white-space: nowrap;
}
Here is how I fixed it.
CSS
#instafeed {
width: 100%;
margin:0px;
}
#instafeed a {
position: relative;
display:inline-block;
float:left;
width: 25%;
}
#instafeed .ig-photo {
width: 100%;
vertical-align: middle;
}
#instafeed .likes {
position: absolute;
width: 100%;
opacity: 0;
font-family: 'LinotypeUniversW01-Thin_723604', Arial, sans-serif;
font-size: 28px;
color: #ffffff;
text-align: center;
top: 50%;
transform: translateY(-50%);
text-shadow: 0 1px rgba(0,0,0,0.5);
-webkit-font-smoothing: antialiased;
-webkit-transition: opacity 100ms ease;
-moz-transition: opacity 100ms ease;
-o-transition: opacity 100ms ease;
-ms-transition: opacity 100ms ease;
transition: opacity 100ms ease;
z-index:10;
}
#instafeed a:hover .likes {
opacity: 1;
}
#instafeed a:hover::after{
content:"";
position:absolute;
width: 100%;
height: 100%;
top: 0; left: 0;
background: #f18a21;
opacity:0.7;
z-index: 5;
}
updated fiddle
I'm trying to edit a link with icon to fade between colors. I'm using :before for background image which is a sprite, because I couldn't figure how to change the color of the icon using only css when it's only png file.
I found this post which might be an answer( CSS3 - Fade between 'background-position' of a sprite image) and tried to modify it to my needs but it's not working...
Here's the code and the codepen demo in action (http://codepen.io/kikibres/pen/KpjZKM):
HTML
<div id="button">Button</div>
CSS
#button{
display: block;
}
#button a {
font-size: 30px;
font-weight: 700;
letter-spacing: 1;
color: #121e34;
text-decoration: none;
vertical-align: middle;
display: inline-block;
transition: color 0.4s ease;
}
#button a:hover {
color: #f68e07;
}
#button a:before {
content: "";
display: inline-block;
vertical-align: middle;
/*float: left;*/
background-image: url('http://www.dagrafixdesigns.com/Templates/DA-2011/DA-2013/Nike_13/img/mobile.png');
background-position: 0 0px;
background-repeat: no-repeat;
width: 30px;
height: 30px;
transition: opacity 0.4s ease-in-out;
-moz-transition: opacity 0.4s ease-in-out;
-webkit-transition: opacity 0.4s ease-in-out;
-o-transition: opacity 0.4s ease-in-out;
}
#button a:hover:before{
content: "";
background-image: url('http://www.dagrafixdesigns.com/Templates/DA-2011/DA-2013/Nike_13/img/mobile.png');
background-position: 0 -29px;
background-repeat: no-repeat;
width: 30px;
height: 30px;
display: inline-block;
/*text-indent: -9999px;*/
/*transition: opacity 0.4s ease-in-out;
-moz-transition: opacity 0.4s ease-in-out;
-webkit-transition: opacity 0.4s ease-in-out;
-o-transition: opacity 0.4s ease-in-out;*/
opacity: 0;
}
/*#button a:hover:before
{
opacity: 0.4;
}*/
How do I fix it so that it'll fade from one color to another...
* Update *
With some help from others (thanks, everyone!), I was able to edit the code. However, it doesn't line up in the middle like I wanted. Here's the actual link that I'm using for a website. The first code displayed was just an example to see how I can make it work. Anyway, I finally separated the icon and the text by using span, but now I'm trying to tie them together by using "+" in the css, but it's not working. Here's the codepen code: http://codepen.io/kikibres/pen/GJbQKq
HTML
<div id="button"><span></span>Free Consultation</div>
CSS
body {
background-color: #121e34;
}
#button{
display: block;
width: 100%;
}
#button a {
display: inline-block;
position: relative;
/*text-indent: 80px;*/
/*width: 100%;
height: 52px;*/
/*background: url(http://i.imgur.com/32k8ugR.png) no-repeat;*/
text-decoration: none;
text-transform: uppercase;
font-size: 30px;
font-weight: 700;
letter-spacing: 1;
color: #fff;
vertical-align: middle;
transition: color 0.4s ease;
}
#button a:hover {
color: #f68e07;
}
#button a span {
position: relative;
display: inline-block;
/*top: 0; left: 0; bottom: 0; right: 0;*/
background: url(http://i.imgur.com/32k8ugR.png) no-repeat;
width: 66px;
height: 52px;
margin-right: 15px;
vertical-align: middle;
}
#button a span:before {
content: "";
/*display: inline-block;*/
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: url(http://i.imgur.com/32k8ugR.png) no-repeat;
background-position: 0 -52px;
opacity: 0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
}
#button a span:hover:before {
opacity: 1;
}
As you can see from this new codepen code, if you hover over the icon, both the icon and the text work, but if you hover over the text, only the text works. How do I fix it?
You've to apply the different image styles on different DOM elements, once it's the anchor tag and the second one is the span (in my example), and then switch the opacity of the different positioned background. CodePen Link
SNIPPET
.button {
display: inline-block;
position: relative;
text-indent: 30px;
width: 36px;
height: 30px;
background: url(http://www.dagrafixdesigns.com/Templates/DA-2011/DA-2013/Nike_13/img/mobile.png) no-repeat;
text-decoration: none;
font-size: 1.5em;
transition: color 0.4s ease;
line-height:1.5em;
}
.button:hover{
color:#f68e07;
}
.button span {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: url(http://www.dagrafixdesigns.com/Templates/DA-2011/DA-2013/Nike_13/img/mobile.png) no-repeat;
background-position: 0 -29px;
opacity: 0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
}
.button:hover span {
opacity: 1;
}
Button<span></span>
To change the color, you can incorporate a CSS transition with a -webkit-filter where when something happens you would invoke the -webkit-filter of your choice. For example:
img {
-webkit-filter:grayscale(0%);
transition: -webkit-filter .3s linear;
}
img:hover
{
-webkit-filter:grayscale(75%);
}
You have declared opacity: 0; for #button a:hover:before { ... }, that's why it doesn't work in your codepen demo.
I got it!!! Thanks everyone for their help! I was able to make it work!!!
Here's working codepen: http://codepen.io/kikibres/pen/LVKQxE
HTML
<div id="button"><span></span>Free Consultation</div>
CSS
body {
background-color: #121e34;
}
#button{
display: block;
width: 100%;
}
#button a {
display: inline-block;
position: relative;
text-decoration: none;
text-transform: uppercase;
font-size: 30px;
font-weight: 700;
letter-spacing: 1;
color: #fff;
vertical-align: middle;
transition: color 0.4s ease;
}
#button a span {
position: relative;
display: inline-block;
background: url(http://i.imgur.com/32k8ugR.png) no-repeat;
width: 66px;
height: 52px;
margin-right: 15px;
vertical-align: middle;
}
#button a span:before {
content: "";
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: url(http://i.imgur.com/32k8ugR.png) no-repeat;
background-position: 0 -52px;
opacity: 0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
}
#button:hover a {
color: #f68e07;
}
#button:hover a span:before {
opacity: 1;
}