I am trying to create a background border around some text. For some reason the border around the text cuts at the top. It still wraps around the text, but the top is cut off.
Here is my css code for the text background:
.blue_bg{
background-color: blue;
padding: 5px;
border:1px solid;
border-radius:30px;
max-width:100%;
overflow: hidden;
}
extra:
Here is the css that changes the text and when I take this code out the text changes, but the text border works as intended.
Here is the code:
.market-product-overlay {
font-size: 14px;
text-transform: uppercase;
font-weight: 700;
color:white;
position: absolute;
left: 0%;
top: 50%;
margin-top: -20px;
text-align: center;
width: 100%;
height: 100%;
opacity: 100;
filter: alpha(opacity=0);
-webkit-transition: opacity 200ms ease-in-out;
-moz-transition: opacity 200ms ease-in-out;
-o-transition: opacity 200ms ease-in-out;
transition: opacity 200ms ease-in-out;
overflow: hidden;
opacity: 1;
transition: all 0.4s ease-in-out;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
-webkit-backface-visibility: hidden;
}
Found the problem. overflow:hidden in the market-product-overlay was the problem! took that out
Related
I am probably not the first person in the world to have a mouse-over scroll up text animation, however, at the same time, for whatever reason, I have found next to none in terms of analogs to compare with. My particular set up uses <figure> wrapped over <figcaption> wrapped over sibling <p>'s.
The issue I'm having with my CSS is my <p>'s are not centered very well vertically after the animation completes.. That is to say, depending on how long the text inside <p> there will either be too much space above or below the list of <p>'s. Have a look at my snippet. I want the space within the figure (inside the black border) to be equal at the top and bottom, but it's not:
figure img {
width: 300px;
height: 300px;
}
figure {
border: 2px solid black;
margin-bottom: 0;
margin-top: -2px;
margin-right: -40px;
position: relative;
z-index: 1;
display: inline-block;
overflow: hidden;
text-align: center;
}
figure figcaption {
padding: 2em;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
figure figcaption::before,
figure figcaption::after {
pointer-events: none;
}
figure figcaption {
position: absolute;
top: 0px;
left: 0;
width: 100%;
height: 100%;
}
figure p {
font-family: Play;
font-size: 20px;
height: auto;
overflow: hidden;
position: relative;
opacity: 0;
bottom: -110%;
}
figure:hover h2 {
opacity: 0;
-webkit-transition: opacity 0.95s, -webkit-transform 0.95s;
transition: opacity 0.95s, transform 0.95s;
}
figcaption:hover p:nth-of-type(1) {
transition: 1s;
bottom: 60%;
opacity: 1;
}
figcaption:hover p:nth-of-type(2) {
bottom: 60%;
opacity: 1;
transition: 1s;
transition-delay: .3s;
}
figcaption:hover p:nth-of-type(3) {
bottom: 60%;
opacity: 1;
transition: 1s;
transition-delay: .6s;
}
figure:hover .border-rect {
opacity: 0;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
figure.effect img {
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}
figure.effect:hover img {
opacity: 0.4;
}
figure.effect figcaption::before,
figure.effect figcaption::after {
position: absolute;
top: 30px;
right: 30px;
bottom: 30px;
left: 30px;
content: '';
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}
figure.effect figcaption::before {
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: scale(0, 1);
transform: scale(0, 1);
}
figure.effect figcaption::after {
border-right: 1px solid #fff;
border-left: 1px solid #fff;
-webkit-transform: scale(1, 0);
transform: scale(1, 0);
}
figure.effect h2 {
opacity: 1;
-webkit-transition: opacity 0.95s, -webkit-transform 0.95s;
transition: opacity 0.95s, transform 0.95s;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
padding-top: 30%;
}
figure.effect:hover figcaption::before,
figure.effect:hover figcaption::after {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
figure:hover h2 {
opacity: 0;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
<figure class="effect">
<img src="http://en.wikipedia.org/wiki/Mountain#/media/File:Lewis_overthrust_fault_nh10f.jpg" />
<figcaption>
<h2>Hover Somewhere Around Here</h2>
<p>paragraph paragraph paragraph </p>
<p>paragraph paragraph paragraph paragraph paragraph</p>
<p>paragraph paragraph paragraph paragraph paragraph</p>
View more
</figcaption>
</figure>
Question: How do I have my <p> scroll robust to different lengths of text the <p> could have? Equivalently, how do I ensure my <p>'s scroll up and land centered vertically within the figure (the black border in the snippet)?
You've done a pretty decent job of this, can I just say first.
Regarding the centering issue, there's 32px padding on each side, so if you give the paragraph a max-width of 236 (300 -64) then the paragraphs will center fine. I set it to 235 in the snippet but add the extra pixel if you want.. :)
The different lengths question.. hmm. It caters for paragraphs of different widths. If you want to cater paragraphs for indeterminable/varied lengths, the image that you're using to create the outline will impede the potential visibility of a scrollbar if you added overflow. If I were to make a scroll-able box, I'd have probably started with a bordered div instead of a figure .. this may be an alternative route for you to take? Just a suggestion.
figure img {
width: 300px;
height: 300px;
}
figure h2 {
max-width: 235px;
}
figure {
border: 2px solid black;
margin-bottom: 0;
margin-top: -2px;
margin-right: -40px;
position: relative;
z-index: 1;
display: inline-block;
overflow: hidden;
text-align: center;
}
figure figcaption {
padding: 2em;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
figure figcaption::before,
figure figcaption::after {
pointer-events: none;
}
figure figcaption {
position: absolute;
top: 0px;
left: 0;
width: 100%;
height: 100%;
}
figure p {
font-family: Play;
font-size: 20px;
max-width: 235px;
height: auto;
overflow: hidden;
position: relative;
opacity: 0;
bottom: -110%;
}
figure:hover h2 {
opacity: 0;
-webkit-transition: opacity 0.95s, -webkit-transform 0.95s;
transition: opacity 0.95s, transform 0.95s;
}
figcaption:hover p:nth-of-type(1) {
transition: 1s;
bottom: 70%;
opacity: 1;
}
figcaption:hover p:nth-of-type(2) {
bottom: 70%;
opacity: 1;
transition: 1s;
transition-delay: .3s;
}
figcaption:hover p:nth-of-type(3) {
bottom: 70%;
opacity: 1;
transition: 1s;
transition-delay: .6s;
}
figure:hover .border-rect {
opacity: 0;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
figure.effect img {
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}
figure.effect:hover img {
opacity: 0.4;
}
figure.effect figcaption::before,
figure.effect figcaption::after {
position: absolute;
top: 30px;
right: 30px;
bottom: 30px;
left: 30px;
content: '';
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}
figure.effect figcaption::before {
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: scale(0, 1);
transform: scale(0, 1);
}
figure.effect figcaption::after {
border-right: 1px solid #fff;
border-left: 1px solid #fff;
-webkit-transform: scale(1, 0);
transform: scale(1, 0);
}
figure.effect h2 {
opacity: 1;
-webkit-transition: opacity 0.95s, -webkit-transform 0.95s;
transition: opacity 0.95s, transform 0.95s;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
padding-top: 30%;
max-width:235px;
}
figure.effect:hover figcaption::before,
figure.effect:hover figcaption::after {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
figure:hover h2 {
opacity: 0;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
<figure class="effect">
<img src="http://en.wikipedia.org/wiki/Mountain#/media/File:Lewis_overthrust_fault_nh10f.jpg" />
<figcaption>
<h2>Hover Somewhere Around Here
</h2>
<p>paragraph paragraph paragraph paragraph paragraph paragraph </p>
<p>You hovered on me! Great!</p>
<p>paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph</p>
View more
</figcaption>
</figure>
I'm trying to achieve a simple :hover effect where the image hovered scales up when hovered. Strangely, when I click the :hover radio button in the "Force element state" in Chrome dev tools, the effect works as expected, but when I actually hover over the image, no dice. Any insight would be much appreciated!
This is my markup (the image has a semi opaque overlay)
<article class="news-loop_item">
<img
src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-
s_dx_18-300mmf_35-56g_ed_vr/img/sample/sample4_l.jpg" class="news-
loop_img" alt="featured image">
<div class="news-loop_overlay">
<h2 class="news-loop_title">Title</h2>
<p class="news-loop_date">Date</p>
<div class="news-loop_summary">Summary</div>
</div>
</article>
And my scss
.news-loop {
flex-wrap: wrap;
margin: -1rem;
}
.news-loop_item {
flex-basis: calc(100% / 2 - 2rem);
height: 20rem;
margin: 1rem;
overflow: hidden;
position: relative;
}
.news-loop_img {
height: 100%;
object-fit: cover;
overflow: hidden;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
position: relative;
vertical-align: middle;
width: 100%;
}
.news-loop_img:hover {
-webkit-transform: scale(1.15, 1.15);
transform: scale(1.15, 1.15);
}
.news-loop_overlay {
background: rgba(0, 0, 0, .75);
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.news-loop_overlay:hover {
background: rgba(0, 0, 0, .5);
}
https://codepen.io/evanhickman/pen/ZXOmWb
The reason why is that your hover selector is wrong, check out this:
.news-loop_item:hover .news-loop_img {
-webkit-transform: scale(1.15, 1.15);
transform: scale(1.15, 1.15);
}
See the parent element needs the hover event.
The issue is because your .news-loop_overlay class div is 'capturing' the hover effect.
Try adding a z-index: -1; to that div and you'll see that the scale works.
http://jasperalani.com/
If you hover over the logo at the bottom left of the page it becomes super pixelated when you hover over it.
I am using
transform: rotate(360deg);
How can I fix this so it maintains its quality?
That's because you are making you image to transform:rotate(360deg);, instead of that target you parent element .socialmedia and try it works.
.socialmedia {
position: fixed;
bottom: 0;
right: 1;
width:21px;
height:21px;
-webkit-transition: -webkit-transform 0.6s ease-in-out;
transition: transform 0.6s ease-in-out;
}
img{
width: 100%;
height: 100%;
}
.socialmedia:hover{
transform:rotate(360deg);
}
.socialmedia {
position: fixed;
bottom: 0;
right: 1;
width:21px;
height:21px;
-webkit-transition: -webkit-transform 0.6s ease-in-out;
transition: transform 0.6s ease-in-out;
}
img{
width: 100%;
height: 100%;
}
.socialmedia:hover{
transform:rotate(360deg);
}
<div class="socialmedia">
<a href="https://ello.co/jasperalani">
<img id="ello" src="http://jasperalani.com/images/ello_icon.png">
</a>
</div>
This is a known problem on Google Chrome.
Usually, you can overcome the problem by adding -webkit-backface-visibility: hidden to your element you rotate. In your example it will remove the anti aliasing entirely, though.
This is, because you are using transition instead of transform, so to fix the problem you rather add outline: 1px solid transparent to the CSS of your image. This will solve the problem.
img {
width: 21px;
height: 21px;
-webkit-transition: -webkit-transform 0.6s ease-in-out;
transition: transform 0.6s ease-in-out;
outline: 1px solid transparent;
}
img:hover {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
<img id="ello" src="http://jasperalani.com/images/ello_icon.png">
I'm trying to create a hover button using the following code and it works relatively okay in all browsers except Chrome:
<div id="blur" class="et_pb_module et-waypoint et_pb_image et_pb_animation_off et_pb_image_0 et_always_center_on_mobile et-animated">
<a href="http://vina.typesetdesign.com/wines/reserva/reserva-sauvignon-blanc/">
<img alt="" src="http://vina.typesetdesign.com/wp-content/uploads/2015/11/2015_11_17Vina_Echeverria_Reserva_Sauvignon_Blanc_V1.png">
</a>
</div>
#blur img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
#blur img:hover {
opacity: .4;
z-index: 1;
}
#blur a:hover:before {
background-color: #6d8e3b;
color: #fff;
content: "Learn More";
display: block;
font-size: 12px;
margin-left: auto;
margin-right: auto;
opacity: .9 !important;
padding: 18px;
position: relative;
top: 20em;
width: 70px;
z-index: 2;
margin-top: -3em;
}
For some reason, Chrome won't let you hover over the button without it glitching out and flickering super badly. Is there an easy way around this without having to add in a separate button?
Live Page: http://vina.typesetdesign.com/wines/varietal/
Fiddle: https://jsfiddle.net/35txpy8v/
It's flickering because the element moves while you hover over it. The reason the element is moving is because of the pseudo element's positioning. To work around this, I'd suggest absolutely positioning the pseudo element relative to the parent element. In doing so, the pseudo element's position won't have any effect on the parent element.
Updated Example
#blur img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
position: relative;
}
#blur img:hover {
opacity: .4;
z-index: 1;
}
#blur a:hover:before {
content: "Learn More";
background-color: #6d8e3b;
position: absolute;
top: 50%;
margin-top: -50px;
color: #fff;
font-size: 12px;
opacity: .9;
padding: 18px;
width: 70px;
z-index: 2;
}
I put an image on :after, with a translation on :hover. It makes other unrelated elements move on Chrome, with OS X (Firefox: unresponsive, and Safari : doesn't support transition effect)
I tried without transition, works fine.
I have this on several elements, and they all have this same problem as long as transition and :after are involved.
Here's the html:
See the project
and the css:
.btn-call-to-action {
background: #8e8287;
margin-bottom: 15px;
color: #f5f3e2;
padding: 10px 70px 10px 10px;
margin-top: 6px;
line-height: 1;
display: inline-block;
position: relative;
border-bottom: none;
border-radius: 2px;
white-space: nowrap; }
.btn-call-to-action:after {
content: url('../img/general-white-arrow.svg?1370787761');
position: relative;
display: inline-block;
position: absolute;
top: 8px;
width: 35px;
padding-left: 15px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out; }
.btn-call-to-action:hover:after {
-webkit-transform: translatex(6px);
-moz-transform: translatex(6px);
-o-transform: translatex(6px);
-ms-transform: translatex(6px);
transform: translatex(6px); }
and the live version here.