I have a DIV which its width is expanding on hover, and more text is displayed. The problem is that while the div is expanding evenly to both sides (using changing margins) the text is moving to the right like it is keeping its former position inside the div. This happens in chrome and IE but not in Firefox for some reason. I want it to stay at the center if possible. Can be seen at: http://wiki.doalogue.co.il/ while hovering the on the Doalogue wiki headline
the relevant HTML:
<div id="mf-banner-intro">
<h2>
<span class="mw-headline" id="DoAlogue_Wiki">
<big><i>headline:DoAlogue Wiki</i></big>
</span>
</h2>
<h3>
<span class="mw-headline">Second headline</span>
</h3>
<p>The apearing text</p>
<h4>
<span class="mw-headline">▼</span>
</h4>
</div>
The relevant CSS
#mf-banner-intro {
background: rgba(20,20,20,0.85);
margin: 40px 30% 25px 30%;
padding: 20px;
position: relative;
width: 40%;
font-size: 150%;
text-align: center;
opacity: 0.9;
-webkit-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
#mf-banner-intro h2 {
font-size: 150%;
text-align: center;
line-height: 100%;
color: #FFF;
border-bottom: 1px solid #fff;
margin-bottom: -0.2em;}
#mf-banner-intro p {
color: #FFF;
opacity: 0;
font-size: larger;
padding: 1em 3em;
margin-bottom: -1em;
display: none;
-webkit-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;}
#mf-banner-intro:hover {
width: 50%;
margin: 40px 25% 25px 25%;
background-color: rgba(59,164,204,0.88);
-webkit-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;}
#mf-banner-intro:hover p {
opacity: 1;
overflow: visible;
display: block;
-webkit-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
Thanks!
Related
I want to hover both classes col-md-3 and overlay-text via one hover. When hover over image I want to trigger second hover, in this case over text.
If CSS somehow could support if/else statements, I would wrote if
col-md-3 is hovered then hover overlay-text.
.overlay-text {
background-color: #79b13c;
color: white;
z-index: 50;
position: absolute;
bottom: 0px;
width: 270px;
text-align: center;
font-size: 1.4rem;
font-weight: 600;
-webkit-transition: background-color 0.5s ease-in-out, font-size 0.5s;
-moz-transition: background-color 0.5s ease-in-out, font-size 0.5s;
-o-transition: background-color 0.5s ease-in-out, font-size 0.5s;
transition: background-color 0.5s ease-in-out, font-size 0.5s;
}
.overlay-text:hover {
content: "";
background-color: #328ba6;
cursor: pointer;
transition: ease-in-out 0.5s, font-size 0.5s;
line-height: 2;
font-size: 1.5rem;
}
.overlay-text:hover::after {
transition: ease-in-out 1s, font-size 1s;
}
.col-md-3 {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
position: relative;
padding-left: 5px;
padding-right: 5px;
}
.col-md-3 img {
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.col-md-3 img:hover {
-webkit-transform: translate3d(0, -10%, 0);
transform: translate3d(0, -10%, 0);
cursor: pointer;
}
.overlay-text-blank {
text-align: center;
font-size: 1.8rem;
font-weight: 600;
vertical-align: middle;
}
<div class="container">
<div class="row tiles">
<div class="col-md-3">
<img alt="text" src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" class="img-fluid">
<div class="overlay-text">Custom text</div>
</div>
</div>
</div>
FiddleJS Demo: https://jsfiddle.net/57nvbfud/5/
You have two options here:
First one change hover to img:hover + .overlay-text
Second one is change both hover in col-md-3:hover.
.overlay-text {
background-color: #79b13c;
color: white;
z-index: 50;
position: absolute;
bottom: 0px;
width: 270px;
text-align: center;
font-size: 1.4rem;
font-weight: 600;
-webkit-transition: background-color 0.5s ease-in-out, font-size 0.5s;
-moz-transition: background-color 0.5s ease-in-out, font-size 0.5s;
-o-transition: background-color 0.5s ease-in-out, font-size 0.5s;
transition: background-color 0.5s ease-in-out, font-size 0.5s;
}
.col-md-3:hover .overlay-text{
content:"";
background-color: #328ba6;
cursor: pointer;
transition: ease-in-out 0.5s, font-size 0.5s;
line-height: 2;
font-size: 1.5rem;
}
.col-md-3:hover .overlay-text::after{
transition: ease-in-out 1s, font-size 1s;
}
.col-md-3 {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
position: relative;
padding-left: 5px;
padding-right: 5px;
}
.col-md-3 img {
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.col-md-3:hover img{
-webkit-transform: translate3d(0,-10%,0);
transform: translate3d(0,-10%,0);
cursor: pointer;
}
.overlay-text-blank {
text-align: center;
font-size: 1.8rem;
font-weight: 600;
vertical-align: middle;
}
<div class="container">
<div class="row tiles">
<div class="col-md-3">
<img alt="text" src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" class="img-fluid">
<div class="overlay-text">Custom text</div>
</div>
</div>
</div>
Ive got some problems with animating :before element. It's a little bit messy but im leaving it at stage that i ended my job. So everytinhgs work beside that :before element - arrow in FA. It should smoothly slide to right side, but its only jumping eaven with transition time seted up.
HTML and CSS:
.seemore span {
overflow: hidden;
position: relative;
color: white;
left: -90px;
width: 10px !important;
}
.seemore {
overflow: hidden;
transition: all 0.35s ease-in-out;
}
.usluga:hover {
background: #dc0d1d;
transition: all 0.35s ease-in-out;
}
.seemore:hover,
.seemore:focus {
/* things won't work in IE 10 without this declaration */
}
.usluga:hover .normalfont,
.usluga:hover .headerfont,
.usluga:hover .seemore:before {
color: white !important;
transition: all 0.35s ease-in-out;
}
.usluga:hover .seemore span {
left: 0px;
transition: all 0.35s ease-in-out;
}
.seemore:before {
content: " ";
background: red;
widows: 10px;
height: 10px;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: #dc0d1d;
font-size: 11px;
padding-right: 0.5em;
position: absolute;
}
.usluga:hover .seemore:before {
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.usluga:hover .seemore:before {
left: 130px;
transition: all 0.3s ease-out;
}
<div class="usluga">
<p class="headerfont" style="padding-bottom: 0.1em;">01<span class="smallfont"> / print</span></p>
<p class="normalfont">Druk<br>Wielkoformatowy</p>
<p class="seemore"><span>zobacz więcej</span></p>
</div>
Transition goes from initial value to a new value and bounces back.
You do not have an initial left property set for your element.
Just add left: 0 to the initial stats and it should work.
.seemore span {
overflow: hidden;
position: relative;
color: white;
left: -90px;
width: 10px !important;
}
.seemore {
overflow: hidden;
transition: all 0.35s ease-in-out;
}
.usluga:hover {
background: #dc0d1d;
transition: all 0.35s ease-in-out;
}
.seemore:hover,
.seemore:focus {
/* things won't work in IE 10 without this declaration */
}
.usluga:hover .normalfont,
.usluga:hover .headerfont,
.usluga:hover .seemore:before {
color: white !important;
transition: all 0.35s ease-in-out;
}
.usluga:hover .seemore span {
left: 0px;
transition: all 0.35s ease-in-out;
}
.seemore:before {
content: " ";
background: red;
widows: 10px;
height: 10px;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: #dc0d1d;
font-size: 11px;
padding-right: 0.5em;
position: absolute;
/* Setting initial 'left' value */
left: 0;
}
.usluga:hover .seemore:before {
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.usluga:hover .seemore:before {
left: 130px;
transition: all 0.3s ease-out;
}
<div class="usluga">
<p class="headerfont" style="padding-bottom: 0.1em;">01<span class="smallfont"> / print</span></p>
<p class="normalfont">Druk<br>Wielkoformatowy</p>
<p class="seemore"><span>zobacz więcej</span></p>
</div>
I am trying to have a corner button display new content on hover using the following setup:
<div class="panel panel-default1">
<div class="panel-body">
<div class='amg-corner-button_wrap'>
<div class="overlay"></div>
<div class="overlay-content">
<h2>Image Ink Logo</h2>
<p>Logo for a screen printing company. They wanted a detachable/recognizable brand that didn't need the name of the company.</p>
</div>
</div> <!-- wrap -->
</div> <!-- panel body -->
</div> <!-- panel default -->
CSS:
.panel-default1 {
padding-top: 10px;
border-radius: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.10);
height: 400px;
width: 100%;
overflow: hidden;
margin: 0 auto;
position: relative;
}
.amg-corner-button_wrap {
display: block;
position: absolute;
bottom: 0;
right: 0;
width: 40px;
height: 40px;
}
.amg-corner-button_wrap .overlay {
border-bottom: 40px solid #e8c63d;
border-left: 40px solid transparent;
bottom: 0;
height: 0;
opacity: .95;
position: absolute;
right: 0;
text-indent: -9999px;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
width: 0;
}
.amg-corner-button_wrap:hover .overlay {
border-bottom: 800px solid #e8c63d;
border-left: 800px solid transparent;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.amg-corner-button_wrap .overlay-content {
bottom: 0;
color: #333;
left: 0;
opacity: 0;
padding: 30px;
position: absolute;
right: 0;
top: 0;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.amg-corner-button_wrap .overlay-content h2 {
border-bottom: 1px solid #333;
padding: 0 0 12px;
}
.amg-corner-button_wrap:hover .overlay-content {
opacity: 1;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
-moz-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
Here is fiddle : https://jsfiddle.net/ar3jkuvq/
The hover deployment works well but the .overlay-content text does not show up if .amg-corner-button_wrap uses position: absolute. However I need it to keep the hover on the wrap only.
How can I keep the hover effect on the wrap only and show the text content at the same time?
You can use CSS3 transform property to scale the overlay instead of using a border, and then use a General sibbling combinator [w3] selector ~ to select the .overlay-content element that is preceded by a .amg-corner-button_wrap:hover.
Working fiddle
add this class in your css
.amg-corner-button_wrap{
width:100%;
height:100%;
}
I believe you can make use of the pointer-events attribute here.
Remove position: absolute; from .amg-corner-button_wrap
Add pointer-events: none; to .panel-default1
Add pointer-events: all; to .amg-corner-button_wrap .overlay
Working JSFiddle
I have this simple hide/show toggle which fades in/out text when hovering. The only problem is, I don't want it to be invisble (because it takes up unnecessary space). But when I add display element the fade function doesn't work anymore.
#stuff {
opacity: 0.0;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
transition: all 400ms ease-in-out;
color: black;
text-align: center;
border-style: solid;
border-width: 1px;
border-color: #e0e0e0;
border-radius: 25px;
width: 200px;
}
#hover {
width: 150px;
height: 10px;
margin-bottom: 15px;
cursor: pointer;
float: center;
font-family: 'Open Sans', FontAwesome;
font-weight: 600;
}
#hover:hover+#stuff {
opacity: 1.0;
display: inline-block;
}
`
<div id="hover">HOVER HERE</div>
<div id="stuff">Revealed text</div>
WITH FADE ANIMATION, but just hidden: jsfiddle
WITHOUT FADE ANIMATION, but appears when hovering and doesn't take up space jsfiddle
Is it possible to maintain the fade animation without the text just being invisible?
You can use max-height to remove the unwanted space
See code snippet bellow:
#stuff {
opacity: 0.0;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
transition: all 400ms ease-in-out;
color: black;
text-align: center;
border-style: solid;
border-width: 1px;
border-color: #e0e0e0;
border-radius: 25px;
width: 200px;
max-height:0;
}
#hover {
width: 150px;
height: 10px;
margin-bottom: 15px;
cursor: pointer;
float: center;
font-family: 'Open Sans', FontAwesome;
font-weight: 600;
}
#hover:hover+#stuff {
opacity: 1.0;
max-height:100%;
}
<div id="hover">HOVER HERE</div>
<div id="stuff">Revealed text</div>
And if you want it to always take no space, you can use absolute position to make go out of the flow of the document
See code snippet:
#stuff {
opacity: 0.0;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
transition: all 400ms ease-in-out;
color: black;
text-align: center;
border-style: solid;
border-width: 1px;
border-color: #e0e0e0;
border-radius: 25px;
width: 200px;
position:absolute;
}
#hover {
width: 150px;
height: 10px;
margin-bottom: 15px;
cursor: pointer;
float: center;
font-family: 'Open Sans', FontAwesome;
font-weight: 600;
}
.wrapper{
position:relative;
}
#hover:hover + #stuff {
opacity: 1.0;
}
<div class="wrapper">
<div id="hover">HOVER HERE</div>
<div id="stuff">Revealed text</div>
<div>
I would wrap your divs in another box and then absolutely position your hidden text so it doesn't take up any space - comments in code to explain what is happening
/* add a container */
.container {
position: relative;
}
#stuff {
opacity: 0;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
transition: all 400ms ease-in-out;
color: black;
text-align: center;
border-style: solid;
border-width: 1px;
border-color: #e0e0e0;
border-radius: 25px;
width: 200px;
display: inline-block;
/* position stuff underneath the container */
position: absolute;
top: 100%;
/* give the background a colour so you can't see anything below */
background: #ffffff;
}
#hover {
width: 150px;
cursor: pointer;
float: center;
font-family: 'Open Sans', FontAwesome;
font-weight: 600;
}
/* show stuff on hover of the container - so you can hover the stuff without it dissappearing */
.container:hover #stuff {
opacity: 1;
}
`
<div class="container">
<div id="hover">HOVER HERE</div>
<div id="stuff">Revealed text</div>
</div>
Some content below
.Button_Image {
width: 40px;
-webkit-transition: opacity 0.5s linear;
-moz-transition: opacity 0.5s linear;
-ms-transition: opacity 0.5s linear;
-o-transition: opacity 0.5s linear;
opacity: 1;
}
.Button:hover .Button_Image {
opacity: 0;
}
.Button_Name {
font-size: 18px;
color: black;
line-height: 40px;
-webkit-transition: opacity 0.5s linear;
-moz-transition: opacity 0.5s linear;
-ms-transition: opacity 0.5s linear;
-o-transition: opacity 0.5s linear;
opacity: 0;
}
.Button:hover .Button_Name {
opacity: 1;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<a href="#" class="Button btn btn-success btn-block">
<img class="Button_Image" src="https://i.stack.imgur.com/hiAkR.png">
<span class="Button_Name">Football</span>
</a>
I have a button which has 2 elements inside.
Image of a sport
Name of the sport
When either of these have the css value display: none; the visible one is aligned to center perfectly.
But I needed to add a fade-in-out functionality, so I wasn't able to use display keyword. Instead I went for opacity.
Which resulted these 2 elements to stay side by side even if one is hidden.
How can I center these, when the other one is hidden?
This image has been captured during the transmission event:
The current state is like this:
But I need it like this:
You can achieve what you want with absolute positioning of the image. Is something like this what you want?:
.sportbtn {
border: green 1px solid;
width: 150px;
height: 40px;
position: relative;
line-height: 40px;
}
.sportimg {
/* centered in button */
width: 30px;
transition: left 1s, margin-left 1s;
position: absolute;
left: 50%;
margin-left: -15px; /* half the image width */
margin-top: 5px;
}
.sportname {
transition: opacity 1s;
opacity: 0;
margin-left: 40px;
}
.sportbtn:hover .sportname {
opacity: 1;
}
.sportbtn:hover .sportimg {
margin-left: 0px;
left: 5px;
}
<div class="sportbtn">
<img class="sportimg" src="https://d30y9cdsu7xlg0.cloudfront.net/png/23344-200.png" />
<span class="sportname">Football</span>
</div>