Tried matching the title to the question as best I could
I have a fiddle here...
In the current state you see the orange <div>s, and when hovered over, I don't want the hover images to show (.popover-email and .popover-pdf).
When searched, and a match is found, then li.match element is enabled, and then I want the images to be visible on hover... just not in their native state.
I can't seem to put it together to do what I want. Not sure if it's even possible yet.
Here's the CSS for that area of the page...
.iso-container li.match {
padding-top: 20px;
background: #f8981d;
padding-left: 5px;
color: #FFFFFF;
font-weight: bold;
text-align: center;
font-size: .7em;
}
.iso-container li.miss {
opacity: 0.3;
}
.popover-email {
display: none;
width: 27px;
height: 24px;
background-image: url(../images/bxw_email.png);
background-repeat: no-repeat;
position: absolute;
top: 95px;
left: 25px;
}
.item:hover .popover-email { display: block; }
.popover-pdf {
display: none;
width: 25px;
height: 27px;
background-image: url(../images/pdf-button.png);
background-repeat: no-repeat;
position: absolute;
top: 95px;
left: 88px;
}
.item:hover .popover-pdf { display: block; }
.item:hover {
z-index: 10;
}
Does that make sense?
You only need to change item:hover to item.match:hover and presto.
.item.match:hover .popover-email { display: block; }
.item.match:hover .popover-pdf { display: block; }
See the fiddle
After a skim of your JS I see that you're adding a class called match when a search is correct.
So why not specify your :hover CSS to execute when this class is found:
.item.match:hover .popover-email { display: block; }
Related
I'm having an animated underline effect when user points the links on my website. The underline is a bit wider than the text itself, as there's a bit of horizontal padding.
Here's the effect I wanted to achieve and I did:
I was thinking if it was possible to simplify my code. After some trial and error, I used negative margin-left on the underline element and calc() to calculate its width as 100% + 2 * padding. It looks to me like an overcomplicated solution. Can the same effect be achieved without calc() and, perhaps, without negative margin?
Of note, adding a wrapper element is not an option. It needs to be a plain <a> element.
:root {
--link-color: #f80;
--link-underline-padding: .5em;
}
a {
color: var(--link-color);
display: inline-block;
padding: 0 var(--link-underline-padding);
text-decoration: none;
}
a:after {
background-color: var(--link-color);
content: '';
display: block;
height: .1em;
margin-left: calc(var(--link-underline-padding) * -1);
margin-top: .2em;
transition: width .5s;
width: 0;
}
a:hover:after {
width: calc(100% + var(--link-underline-padding) * 2);
}
I find dogs pretty cool.
A simple background animation can do this:
a {
background: linear-gradient(currentColor 0 0)
bottom left/
var(--underline-width, 0%) 0.1em
no-repeat;
color: #f80;
display: inline-block;
padding: 0 .5em 0.2em;
text-decoration: none;
transition: background-size 0.5s;
}
a:hover {
--underline-width: 100%;
}
I find dogs pretty cool.
Related:
How to animate underline from left to right?
How to hover underline start from center instead of left?
If you set a to position: relative; you can then use position: absolute; and left: 0px; to push it past the padding and then just use width: 100% to have it extend the entire length.
:root {
--link-color: #f80;
--link-underline-padding: .5em;
}
a {
position: relative;
color: var(--link-color);
display: inline-block;
padding: 0px var(--link-underline-padding);
text-decoration: none;
}
a:after {
position: absolute;
left: 0px;
background-color: var(--link-color);
content: '';
display: block;
height: .1em;
margin-top: .2em;
transition: width .5s;
width: 0;
}
a:hover:after {
width: 100%;
}
I find dogs pretty cool.
I am trying to get a section up and running on my website. I want to add a background image instead of a color. I have tried reading here and other websites and nothing I try seems to work. I am using this section code:
https://codepen.io/ckor/pen/lBnxh
!* {
box-sizing: border-box;
}
ebody {
margin: 0;
font-weight: 500;
font-family: 'HelveticaNeue';
}
esection {
width: 100%;
padding: 0 7%;
display: table;
margin: 0;
max-width: 100%;
background-image: url('https://s15.8cb2jiu3/banner_test.jpg');
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
&:nth-of-type(2n) {
background-color: #D55B79;
}
}
.eintro {
height: 90vh;
}
.econtent {
display: table-cell;
vertical-align: middle;
}
eh1 {
font-size: 3em;
display: block;
color: white;
font-weight: 300;
}
ep {
font-size: 1.5em;
font-weight: 500;
color: #C3CAD9;
}
ea {
font-weight: 700;
color: #373B44;
position: relative;
e&:hover{
opacity: 0.8;
}
e&:active {
top: 1px;
}
}
efooter {
padding: 1% 5%;
text-align:center;
background-color: #373B44;
color: white;
ea {
color: #FE4B74;
font-weight: 500;
text-decoration: none;
}
}
I have added this to the code:
section {
width: 100%;
padding: 0 7%;
display: table;
margin: 0;
max-width: 100%;
background-image: url('https://s15.banner_test.jpg');
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
The goal is to add images that are left or right justified and then add some text to the section. I am aiming for a left image then the next box is a right image and so on. I have seen the effect on other websites and it looks good if done correctly.
In order to add background image to any html element you will need the following line added to your css:
background-image: url("pathtoimage");
In your css code there is :
section {
width: 100%;
padding: 0 7%;
display: table;
margin: 0;
max-width: none;
background-color: #373B44;
height: 100vh;
}
section:nth-of-type(2n) {
background-color: #FE4B74;
}
this code here will fetch for all section html tags and apply to them the styles.
in here you can even notice the first background-color:#373B44; that is applied to all sections and the second background-color: #FE4B74; that is only applied to sections with that are 2n
for example:
(1st section html element in your page) Section 1 will be color #373B44
(2nd section html element in your page) Section 2 will be color #FE4B74
(3rd section html element in your page) Section 3 will be color #373B44
(4th section html element in your page) Section 4 will be color #FE4B74
and so on
Now in order to add a background-image , all we have to do is add the code I provided above to your section in that way
section {
width: 100%;
padding: 0 7%;
display: table;
margin: 0;
max-width: none;
background-color: #373B44;
height: 100vh;
/*added here*/
background-image:url("https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350");
/*added here*/ }
section:nth-of-type(2n) {
background-color: #FE4B74;
}
However, now you have two problems :
1- same background image in all sections (no alternating)
2- the image might be too small , not fit or might be repeated in a bad looking way
so in order to solve problem 1 all you have to do is just the same thing as what happens with background-color . So we just add another background-image under the 2n like so :
section {
width: 100%;
padding: 0 7%;
display: table;
margin: 0;
max-width: none;
background-color: #373B44;
height: 100vh;
background-image:url("https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350");}
section:nth-of-type(2n) {
background-color: #FE4B74;
/*this will overwrite the other background image for your 2n sections*/
background-image:url("https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350");
}
In order to solve the 2nd issue , you might want to use the following:
background-repeat:no-repeat; /*removes repetition*/
background-size:cover; /*allows picture to take up whole section space*/
and the final code will look like this
section {
width: 100%;
padding: 0 7%;
display: table;
margin: 0;
max-width: none;
background-color: #373B44;
height: 100vh;
background-image:url("https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350");
background-repeat:no-repeat;
background-size:cover;}
section:nth-of-type(2n) {
background-color: #FE4B74;
background-image:url("https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350");
}
To better understand the background properties in CSS , I would really suggest going into the following link :
https://www.w3schools.com/css/css_background.asp
And this link will help you understand the section:nth-of-type(2n)
https://www.w3schools.com/cssref/sel_nth-of-type.asp
The codepen link
https://codepen.io/sara-kat/pen/gKrVpg
Have a good day
There is a really simple solution to this, actually. The link to the image isn't working. You don't have to change anything about the rest.
I gave your second section the class bg and put your code to style that section in your CSS. It works if you use a working link:
Codepen
section.bg {
width: 100%;
padding: 0 7%;
display: table;
margin: 0;
max-width: 100%;
background-image: url('//unsplash.it/1200/800');
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
}
I use owl carousel and I want the navigation above the slide in order to navigate easily. Now they are hidden or below the slider. I don't know how to put them above. I tried z-index in the CSS for the carousel and navigation but nothing happens. Need help thank you !
JS
<script>
$(document).ready(function() {
$("#owl-demo2").owlCarousel({
navigation : true, // Show next and prev buttons
slideSpeed : 300,
paginationSpeed : 400,
items : 1,
itemsDesktop : false,
itemsDesktopSmall : false,
itemsTablet: false,
itemsMobile : false
});
});
</script>
CSS
#owl-demo2 .item img{
display: block;
width: 100%;
height: auto;
position: relative;
z-index: 1;
}
.owl-theme .owl-controls .owl-buttons div{
color: #FFF;
display: inline-block;
zoom: 1;
position: fixed;
z-index: 2000;
*display: inline;/*IE7 life-saver */
margin: 90px;
padding: 20px 0px;
font-size: 12px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
background: #869791;
filter: Alpha(Opacity=50);/*IE7 fix*/
opacity: 0.5;
}
.owl-buttons {
position: absolute !important;
top: -45px !important;
left: 50% !important;
transform: translateX(-50%)!important;
}
z-index doesn't put items like you wish it would. I think you need to change positions of these buttons rather than setting different z-index.
Here you have an example of how z-index work. Change z-index as you wish and check how the alignement work on these boxes:
https://jsfiddle.net/grmcfb7z/
You can try this CSS for your solution:
.owl-buttons{
position: absolute;
top: -45px;
left: 50%;
transform: translateX(-50%);
}
You might want to tweak it if it doesn't look as you wish. I tried it on your example from the comments and it looks great to me.
UPDATE
After digging into the exact problem, here is the full solution:
#owl-demo2 .item img {
display: block;
width: 100%;
height: auto; //we don't need position or z-index property here
}
.owl-theme .owl-controls .owl-buttons div {
color: #FFF;
display: inline-block;
zoom: 1;
*display: inline; /*IE7 life-saver */
margin: 10px; //fixed margin to not mess our buttons alignement
padding: 5px 15px; //smaller padding for better look
font-size: 12px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
background: #869791;
filter: Alpha(Opacity=50); /*IE7 fix*/
opacity: 0.5;
}
.owl-buttons, .owl-pagination {
position: absolute !important;
left: 50% !important;
transform: translateX(-50%) !important; //here we override our buttons
//positions
}
.owl-buttons {
top: 0 !important; //nav position
}
.owl-pagination {
bottom: 0 !important; //pagination position
}
Working jsfiddle: https://jsfiddle.net/43wo7g98/3/
I would like to change the videojs v5 controls layout in order to make a full width progress bar, on top of the vjs-control-bar area, similar to the pre-v5 player skin.
Here is the v5 skin:
And here is the pre-v5 skin. Notice the full width progress bar:
How should I proceed? Is it necessary to modify the component structure tree within the ProgressControl component or can it be done using CSS only, with the existing ProgressControl component?
I noticed that I can put it on top by changing the vjs-progress-control display CSS property from flex to block, initial or inline but I can't set the width to 100% (other ProgressControl components width are still considered). I assume it is because the vjs-progress-control is still in the flex flow of the container.
EDIT
I made some progress. I can achieve the desired effect by using the following CSS:
.vjs-progress-control {
position: absolute;
bottom: 26px; /* The height of the ControlBar minus 4px. */
left: 0;
right: 0;
width: 100%;
height: 10px; /* the height must be reduced from 30 to 10px in order to allow the buttons below (e.g. play) to be pushed */
}
.vjs-progress-holder {/* needed to have a real 100% width display. */
margin-left: 0px;
margin-right: 0px;
}
Unless one of you find a way to make it better, I will post this edit as accepted answer when it will be allowed.
DEMO
.vjs-fluid {
overflow: hidden;
}
.vjs-control-bar {
display: block;
}
.vjs-control {
position: absolute;
}
.vjs-progress-control {
bottom: 28px; left: 0;
height: 10px;
width: 100%;
}
.vjs-progress-holder {
position: absolute;
left: 0; margin: 0;
height: 8px; width: 100%;
}
.vjs-play-progress,
.vjs-load-progress {
height: 8px;
}
.vjs-play-progress:before {
font-size: 12px; top: -2px;
text-shadow: 0 0 2px black
}
.vjs-current-time {
display: block;
left: 35px;
}
.vjs-time-divider {
position: absolute;
display: block;
left: 70px;
}
.vjs-remaining-time {
display: none;
}
.vjs-duration {
display: block;
left: 70px;
}
.vjs-volume-menu-button {
position: absolute;
bottom: 0; right: 55px;
}
.vjs-playback-rate {
position: absolute;
bottom: 0; right: 28px;
}
.vjs-fullscreen-control {
position: absolute;
bottom: 0; right: 0;
}
There's still need to style the subtitles, captions and chapter buttons
.video-js .vjs-progress-control {
position:absolute;
width: 100%;
top:-.3em;
height:3px;
/* deal with resulting gap between progress control and control bar that
is the result of the attempt to keep things "clickable" on the controls */
background-color: #2B333F;
background-color: rgba(43, 51, 63, 0.7);
}
.video-js .vjs-progress-holder {
position:absolute;
margin:0px;
top:0%;
width:100%;
}
This seemed to get rid of the problems I had across other browsers with the :hover styling inherited from video.js. More masterful css developers might be able to make the expansion a bottom-to-top expansion, negating the need for the fancy footwork around the position of the progress control and the color.
Here is a minimal custom skin (in scss) that shows a full-width progress bar above the rest of the controls. This works with video.js 5.19.2
.video-js.vjs-custom-skin {
.vjs-custom-control-spacer {
display: flex;
flex: 1 1 auto;
}
.vjs-time-divider {
display: inherit;
}
.vjs-current-time {
margin-left: 1em;
}
.vjs-current-time, .vjs-duration {
display: inherit;
padding: 0;
}
.vjs-remaining-time {
display: none;
}
.vjs-play-progress:before {
display: none;
}
.vjs-progress-control {
position: absolute;
left: 0;
right: 0;
width: 100%;
height: .5em;
top: -.5em;
&:hover {
height: 1.5em;
top: -1.5em;
}
}
.vjs-progress-holder {
margin: 0;
height: 100%;
}
}
I'm pulling in a tumblr feed using tumblr's code, and using after: to add an image as a separator between posts. I'd like to center the image, but haven't had luck doing so. Since tumblr's generating the content, not me, I don't think I can use span tags, which seems to be the usual answer. Any other ideas?
Page showing feed in use: lumn.net/index.shtml
CSS:
.tumblr_post:after {
content: url(../img/flower.png);
display: block;
position: relative;
margin-top: 42px;
margin-bottom: 24px;
margin-left: auto;
margin-right: auto;
}
Try this:
.tumblr_post:after {
content: url("../img/flower.png");
display: block;
margin: 42px auto 24px;
position: relative;
text-align: center;
width: 100%;
}
While the answer from Zoltan Toth works, it's got a bunch of code that does nothing for the desired effect. This should do the trick and with less code.
.tumblr_post:after {
content: url("../img/flower.png");
display: block;
text-align: center;
}
Here is a working solution on all screens :
.produit-col .img-produit::after{
content: '';
background: url("../img/icone.png") center no-repeat;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: none;
}