coding: hover

Показаны сообщения с ярлыком hover. Показать все сообщения

воскресенье, 29 марта 2020 г.

Как сделать иконку внутри шестигранной фигуры, чтобы при наведении шестигранник заливался цветом, а иконка меняла цвет с черного на белый? [закрыт]

#html #css #svg #hover #img


        
             
                
                    
                        
                            Закрыт. Данный вопрос необходимо конкретизировать. Ответы
на него в данный момент не принимаются.
                            
                        
                    
                
                            
                                
                
                        
                            
                        
                    
                        
                            Хотите улучшить этот вопрос? Переформулируйте вопрос,
чтобы он был сосредоточен только на одной проблеме, отредактировав его.
                        
                        Закрыт 11 месяцев назад.
                                                                                
           
                
        
Как сделать иконку внутри шестигранной фигуры, чтобы при наведении шестигранник заливался
цветом, а иконка меняла цвет с черного на белый?

Ответы

Ответ 1


Вот с использованием svg и fontawesome









PS: чтобы вставить fa иконку в svg обратный слэш необходимо заменить на &#x

среда, 4 марта 2020 г.

Css: внутренняя тень на элементах и hover

#css #hover


Есть проблема, не могу найти решения.
Есть блок, у него внутренняя тень. Что бы тень накладывалась на элементы приходиться
ставить отрицательный z-index.



.content {
  height: 140px;
  overflow-x: auto;
  white-space: nowrap;
  overflow-y: hidden;
  padding: 20px 10px 10px 10px;
  box-shadow: inset 0px 0px 15px 10px rgba(0, 0, 0, 1);
  backgound-color: yellow;
  border: 1px solid black;
  width: 300px;
}

.item {
  height: 100px;
  width: 100px;
  background-color: yellow;
  display: inline-block;
  cursor: pointer;
  z-index: -1;
  position: relative;
}

.item:hover {
  background-color: red;
}

  
  
  
  
  
  
  





Но тогда перестаёт работать hover.

Убираю отрицательный z-index. Тень на падает на элементы внутри блока.



.content {
  height: 140px;
  overflow-x: auto;
  white-space: nowrap;
  overflow-y: hidden;
  padding: 20px 10px 10px 10px;
  box-shadow: inset 0px 0px 15px 10px rgba(0,0,0,1);
  backgound-color: yellow;
  border: 1px solid black;
  width: 300px;
}
.item{
  height: 100px;
  width: 100px;
  background-color: yellow;
  display: inline-block;
  cursor: pointer;
}
.item:hover{
  background-color: red;
}

Ответы

Ответ 1


Быть может такой вариант подойдет. Правда скролл получается внутри.



.content {
  padding: 20px 10px 0 10px;
  width: 300px;
  height: auto;
  box-sizing: border-box;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}
.item{
  height: 100px;
  width: 100px;
  background-color: yellow;
  display: inline-block;
  cursor: pointer;
  position: relative;
}
.item:hover{
  background-color: red;
}
.wrapper {
  border: 1px solid black;
  box-sizing: border-box;
  width: 300px;
  overflow: hidden;
  position: relative;
  padding-bottom: 20px;
}
.shadow-top, .shadow-right, .shadow-bottom, .shadow-left {
  box-shadow: 0 0 15px 10px rgba(0,0,0,1);
  position: absolute;
}
.shadow-right, .shadow-left {
  height: 100%;
  width: 0;
  top: 0;
}
.shadow-top, .shadow-bottom {
  width: 300px;
  height: 0;
  left: 0;
}
.shadow-top {
  top: 0;
}
.shadow-right {
  right: 0;
}
.shadow-bottom {
  bottom: 0;
}
.shadow-left {
  left: 0;
}

  
    
    
    
    
    
    
    
  
  
  
  
  





Вариант с JS (jQuery). Если стилей много, то лучше менять класс, а не стили.

var items = [];

getItemsPos();

function getItemsPos() {
    $('.item', '.content').each(function(index) {
        var offset = $(this).offset();
        items[index] = {
            'minX': offset.left,
            'minY': offset.top,
            'maxX': offset.left + $(this).width() - 1,
            'maxY': offset.top + $(this).height() - 1,
        };
    });
};

function itemHover(index) {
    var cX = event.pageX,
        cY = event.pageY;

    return (cY <= items[index].maxY && cY >= items[index].minY) && (cX <= items[index].maxX
&& cX >= items[index].minX);
}

$('.content').mousemove(function(e) {
    $('.item', $(this)).css('background-color', 'yellow');
    $(this).css('cursor', 'default');

    for (i = 0; i < items.length; i++) {
        if (itemHover(i) === true) {
            $('.item', $(this)).eq(i).css('background-color', 'red');
            $(this).css('cursor', 'pointer');
        }
    }
});

$('.content').mouseout(function(e) {
    $('.item', $(this)).css('background-color', 'yellow');
    $(this).css('cursor', 'default');
});

$('.content').scroll(function(e) {
    getItemsPos();
});


Ответ 2


С помощью javascript и pointer-events:none; это можно сделать так:



shadowHeight();
window.addEventListener('resize', function() { // на случай, если при адаптиве высота
блока будет меняться
  shadowHeight();
});

function shadowHeight() {
  var block = document.getElementsByClassName('inner')[0];
  var shadow = document.getElementsByClassName('shadow')[0];
  shadow.style.height = block.clientHeight + 'px'; // устанавливаем тени высоту,
равную внутреннему контенту
}
.content {
  width: 300px;
  position: relative;
}

.inner {
  padding: 20px 10px;
  overflow-x: auto;
  white-space: nowrap;
  overflow-y: hidden;
  border: 1px solid black;
  position: relative;
}

.shadow {
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  box-shadow: inset 0px 0px 15px 10px rgba(0, 0, 0, 1);
  pointer-events: none;
}

.item {
  height: 100px;
  width: 100px;
  background-color: yellow;
  display: inline-block;
  cursor: pointer;
}

.item:hover {
  background-color: red;
}

  
    
    
    
    
    
    
    
  
  





Если же прокрутки внутри блока нет, то данная задача решается в разы проще:



.content {
  width: 318px;
  padding: 20px 10px;
  white-space: nowrap;
  border: 1px solid black;
  position: relative;
}

.content:after {
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  content: '';
  box-shadow: inset 0px 0px 15px 10px rgba(0, 0, 0, 1);
  pointer-events: none;
}

.item {
  height: 100px;
  width: 100px;
  background-color: yellow;
  display: inline-block;
  cursor: pointer;
}

.item:hover {
  background-color: red;
}

суббота, 22 февраля 2020 г.

Как сделать плавную смену css градиента при наведении

#html #css #css3 #вёрстка #hover


Как можно сделать плавную смену фона (градиент на градиент) при наведении hover на
элемент. Сделал кнопку, дал ей все необходимые стили, включая transition для плавности
эффекта наведения, но при этом смена фона происходит резко, а все остальные эффекты
в виде изменения тени, как положено меняются плавно. 



.btn_default {
	display: inline-block;
	min-width: 200px;
	font-family: $bold;
	font-size: 1.125em;
	margin-top: 10px;
	padding: 13px 20px;
	text-align: center;
	color: #fff;
	outline: none;
	border-radius: 30px;
	background: linear-gradient(0deg, rgb(158, 48, 160), rgb(213, 80, 298));
	box-shadow: 0 2px 7px rgba(213, 80, 208, 0.6);
	transition: all 0.5s;
}

.btn_default:hover {
		color: #fff;
		text-decoration: none;
		background: linear-gradient(0deg, rgb(101, 31, 102), rgb(173, 65, 169));
		box-shadow: 0 2px 10px rgba(213, 80, 208, 0.9);
}
Some link

Ответы

Ответ 1


Как вариант



.btn_default {
    display: inline-block;
    min-width: 200px;
    font-family: $bold;
    font-size: 1.125em;
    margin-top: 10px;
    padding: 13px 20px;
    text-align: center;
    color: #fff;
    outline: none;
    border-radius: 30px;
    background: linear-gradient(0deg, rgb(158, 48, 160), rgb(213, 80, 298));
    box-shadow: 0 2px 7px rgba(213, 80, 208, 0.6);
    position: relative;
}
.btn_default > span{
    position: relative;
    z-index: 1;
}
.btn_default:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(0deg, rgb(101, 31, 102), rgb(173, 65, 169));
    box-shadow: 0 2px 10px rgba(213, 80, 208, 0.9);
    border-radius: 30px;
    opacity: 0;
    transition: opacity 0.5s;
}

.btn_default:hover:after {
    opacity: 1;
}
Some link


Ответ 2


.btn_default {
  display: inline-block;
  min-width: 200px;
  font-weight: bold;
  font-size: 1.125em;
  margin: 10px auto;
  padding: 13px 20px;
  text-align: center;
  text-shadow: 0px 0px 1px hsla(0, 0%, 0%, .8);
  color: #fff;
  outline: none;
  border-radius: 30px;
  background: hsla(294, 53%, 47%, 1);
  box-shadow: inset .125em .125em .5em hsla(294, 53%, 40%, 1), inset -.125em -.125em
.5em hsla(294, 53%, 40%, 1), 0 2px 7px rgba(213, 80, 208, 0.6);
  transition: all .8s linear 0s;
}

.btn_default:hover {
  color: #fff;
  text-decoration: none;
  background: hsla(294, 53%, 37%, 1);
  box-shadow: inset .125em .125em .5em hsla(294, 53%, 30%, 1), inset -.125em -.125em
.5em hsla(294, 53%, 30%, 1), 0 2px 10px rgba(213, 80, 208, 0.9);
}
Some link

пятница, 21 февраля 2020 г.

Не могу задать правильное поведение hover

#html #css #html5 #css3 #hover


Всем привет.
Почти сделал рейтинг со звездами, как вдруг проблема с наведением по ним...
Вот код - https://jsfiddle.net/dokgkxza/





    
        
        
        
        
        
        
        
        
        
        
        
    




С левой стороны на правую нормально работает, но если наоборот вести курсор то будет
подсвечиваться только первый элемент на который навел...

Добавил z-index: 20; к спан ховер, а к обычному спан z-index: 30; ... но это далеко
не идеал...
Код дубль 2 - https://jsfiddle.net/dokgkxza/1/

Ответы

Ответ 1


Вот работающий пример (только вместо звездочек кружочки)

.star-item span:hover ~ span label,
.star-item span:hover label,
.star-item span.checked label,
.star-item span.checked ~ span label {
    background:#F90;
    color:#FFF;
}


Как сделать звездочки без картинок на чистом css

А вобще как я понимаю это типовая задачка (даже в яндексе ее дают), есть смысл посмотреть
готовое решение и его повторить, не изобретая свой велосипед.


Ответ 2


Еще раз всем привет)))
Сделал я как нужно))) Большое спасибо Алексею Обухову, автору первого ответа.
Вся фишка оказалась во float: right; для класса star-item и в селекторе ~.
Вот код дубль 3 - https://jsfiddle.net/yhLrur49/



* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.rating-new {
	position: relative;
	overflow: hidden;
}

.rating-new::after {
	content: "";
	display: block;
	padding-bottom: 10%;
}

.rating-new > ul {
	background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgaWQ9InN2ZzgiCiAgIHZlcnNpb249IjEuMSIKICAgdmlld0JveD0iMCAwIDUyLjkxNjY2NyA1LjI5MTY2NjciCiAgIGhlaWdodD0iMjAiCiAgIHdpZHRoPSIyMDAiPgogIDxkZWZzCiAgICAgaWQ9ImRlZnMyIiAvPgogIDxtZXRhZGF0YQogICAgIGlkPSJtZXRhZGF0YTUiPgogICAgPHJkZjpSREY+CiAgICAgIDxjYzpXb3JrCiAgICAgICAgIHJkZjphYm91dD0iIj4KICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4KICAgICAgICA8ZGM6dHlwZQogICAgICAgICAgIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiIC8+CiAgICAgICAgPGRjOnRpdGxlPjwvZGM6dGl0bGU+CiAgICAgIDwvY2M6V29yaz4KICAgIDwvcmRmOlJERj4KICA8L21ldGFkYXRhPgogIDxnCiAgICAgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCwtMjkxLjcwODMyKSIKICAgICBpZD0ibGF5ZXIxIj4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0ic3Ryb2tlLXdpZHRoOjAuMTY3NDMyNzkiCiAgICAgICBkPSJtIDUuMTU5Mzc1LDI5My43Mjk2IC0xLjc4MjU2NDcsLTAuMjc5NDEgLTAuNzk3MTIzLC0xLjc0MTg3IC0wLjc5NzEyNCwxLjc0MTg3IEwgMCwyOTMuNzI5NiBsIDEuMjg5ODQyLDEuMzU1ODYgLTAuMzA0NTYxNSwxLjkxNDUzIDEuNTk0NDA2OCwtMC45MDM5OCAxLjU5NDQwODcsMC45MDM5OCAtMC4zMDQ1NjQ1LC0xLjkxNDUzIHogbSAtMi41Nzk2ODc3LDEuOTM2NzcgLTEuMTI1ODcyNSwwLjYzODI5IDAuMjE1MDgyOSwtMS4zNTIwMyAtMC45MTA5NTMyNCwtMC45NTc1MiAxLjI1ODg4NzY0LC0wLjE5NzE5IDAuNTYzMDE2NywtMS4yMzAxNCAwLjU2MzAxNjYsMS4yMzAxNCAxLjI1ODcyNjcsMC4xOTcxOSAtMC45MTA5NTE5LDAuOTU3NTIgMC4yMTUwODEsMS4zNTIwMyAtMS4xMjU4NzI0LC0wLjYzODI5IHoiCiAgICAgICBpZD0icGF0aDM3MDIiIC8+CiAgICA8cGF0aAogICAgICAgc3R5bGU9InN0cm9rZS13aWR0aDowLjE2NzQzMjc3IgogICAgICAgZD0ibSAxNS43NDI3MDgsMjkzLjcyOTYgLTEuNzgyNTY0LC0wLjI3OTQxIC0wLjc5NzEyMywtMS43NDE4NyAtMC43OTcxMjQsMS43NDE4NyAtMS43ODI1NjQsMC4yNzk0MSAxLjI4OTg0MiwxLjM1NTg2IC0wLjMwNDU2MSwxLjkxNDUzIDEuNTk0NDA3LC0wLjkwMzk4IDEuNTk0NDA5LDAuOTAzOTggLTAuMzA0NTY1LC0xLjkxNDUzIHogbSAtMi41Nzk2ODcsMS45MzY3NyAtMS4xMjU4NzMsMC42MzgyOSAwLjIxNTA4MywtMS4zNTIwMyAtMC45MTA5NTMsLTAuOTU3NTIgMS4yNTg4ODcsLTAuMTk3MTkgMC41NjMwMTcsLTEuMjMwMTQgMC41NjMwMTcsMS4yMzAxNCAxLjI1ODcyNiwwLjE5NzE5IC0wLjkxMDk1MSwwLjk1NzUyIDAuMjE1MDgxLDEuMzUyMDMgLTEuMTI1ODczLC0wLjYzODI5IHoiCiAgICAgICBpZD0icGF0aDM3MDItNiIgLz4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0ic3Ryb2tlLXdpZHRoOjAuMTY3NDMyNzciCiAgICAgICBkPSJtIDEwLjQ1MTA0MiwyOTMuNzI5NiAtMS43ODI1NjUxLC0wLjI3OTQxIC0wLjc5NzEyMjksLTEuNzQxODcgLTAuNzk3MTI0LDEuNzQxODcgLTEuNzgyNTYzMywwLjI3OTQxIDEuMjg5ODQyLDEuMzU1ODYgLTAuMzA0NTYxNSwxLjkxNDUzIDEuNTk0NDA2OCwtMC45MDM5OCAxLjU5NDQwODgsMC45MDM5OCAtMC4zMDQ1NjQ2LC0xLjkxNDUzIHogbSAtMi41Nzk2ODgsMS45MzY3NyAtMS4xMjU4NzI1LDAuNjM4MjkgMC4yMTUwODI5LC0xLjM1MjAzIC0wLjkxMDk1MzIsLTAuOTU3NTIgMS4yNTg4ODc2LC0wLjE5NzE5IDAuNTYzMDE2NywtMS4yMzAxNCAwLjU2MzAxNjUsMS4yMzAxNCAxLjI1ODcyNjcsMC4xOTcxOSAtMC45MTA5NTE3LDAuOTU3NTIgMC4yMTUwODA4LDEuMzUyMDMgLTEuMTI1ODcyMywtMC42MzgyOSB6IgogICAgICAgaWQ9InBhdGgzNzAyLTgiIC8+CiAgICA8cGF0aAogICAgICAgc3R5bGU9InN0cm9rZS13aWR0aDowLjE2NzQzMjc3IgogICAgICAgZD0ibSAyMS4wMzQzNzUsMjkzLjcyOTYgLTEuNzgyNTY1LC0wLjI3OTQxIC0wLjc5NzEyMywtMS43NDE4NyAtMC43OTcxMjQsMS43NDE4NyAtMS43ODI1NjMsMC4yNzk0MSAxLjI4OTg0MiwxLjM1NTg2IC0wLjMwNDU2MiwxLjkxNDUzIDEuNTk0NDA3LC0wLjkwMzk4IDEuNTk0NDA5LDAuOTAzOTggLTAuMzA0NTY1LC0xLjkxNDUzIHogbSAtMi41Nzk2ODgsMS45MzY3NyAtMS4xMjU4NzIsMC42MzgyOSAwLjIxNTA4MiwtMS4zNTIwMyAtMC45MTA5NTMsLTAuOTU3NTIgMS4yNTg4ODgsLTAuMTk3MTkgMC41NjMwMTcsLTEuMjMwMTQgMC41NjMwMTYsMS4yMzAxNCAxLjI1ODcyNywwLjE5NzE5IC0wLjkxMDk1MiwwLjk1NzUyIDAuMjE1MDgxLDEuMzUyMDMgLTEuMTI1ODcyLC0wLjYzODI5IHoiCiAgICAgICBpZD0icGF0aDM3MDItMiIgLz4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0ic3Ryb2tlLXdpZHRoOjAuMTY3NDMyNzciCiAgICAgICBkPSJtIDI2LjMyNjA0MiwyOTMuNzI5NiAtMS43ODI1NjUsLTAuMjc5NDEgLTAuNzk3MTIzLC0xLjc0MTg3IC0wLjc5NzEyNCwxLjc0MTg3IC0xLjc4MjU2MywwLjI3OTQxIDEuMjg5ODQyLDEuMzU1ODYgLTAuMzA0NTYyLDEuOTE0NTMgMS41OTQ0MDcsLTAuOTAzOTggMS41OTQ0MDksMC45MDM5OCAtMC4zMDQ1NjUsLTEuOTE0NTMgeiBtIC0yLjU3OTY4OCwxLjkzNjc3IC0xLjEyNTg3MywwLjYzODI5IDAuMjE1MDgzLC0xLjM1MjAzIC0wLjkxMDk1MywtMC45NTc1MiAxLjI1ODg4OCwtMC4xOTcxOSAwLjU2MzAxNiwtMS4yMzAxNCAwLjU2MzAxNywxLjIzMDE0IDEuMjU4NzI3LDAuMTk3MTkgLTAuOTEwOTUyLDAuOTU3NTIgMC4yMTUwODEsMS4zNTIwMyAtMS4xMjU4NzMsLTAuNjM4MjkgeiIKICAgICAgIGlkPSJwYXRoMzcwMi0zIiAvPgogICAgPHBhdGgKICAgICAgIHN0eWxlPSJzdHJva2Utd2lkdGg6MC4xNjc0MzI3NyIKICAgICAgIGQ9Im0gMzEuNjE3NzA5LDI5My43Mjk2IC0xLjc4MjU2NiwtMC4yNzk0MSAtMC43OTcxMjIsLTEuNzQxODcgLTAuNzk3MTI0LDEuNzQxODcgLTEuNzgyNTYzLDAuMjc5NDEgMS4yODk4NDIsMS4zNTU4NiAtMC4zMDQ1NjIsMS45MTQ1MyAxLjU5NDQwNywtMC45MDM5OCAxLjU5NDQwOCwwLjkwMzk4IC0wLjMwNDU2NSwtMS45MTQ1MyB6IG0gLTIuNTc5Njg4LDEuOTM2NzcgLTEuMTI1ODczLDAuNjM4MjkgMC4yMTUwODMsLTEuMzUyMDMgLTAuOTEwOTUzLC0wLjk1NzUyIDEuMjU4ODg4LC0wLjE5NzE5IDAuNTYzMDE2LC0xLjIzMDE0IDAuNTYzMDE3LDEuMjMwMTQgMS4yNTg3MjcsMC4xOTcxOSAtMC45MTA5NTMsMC45NTc1MiAwLjIxNTA4MiwxLjM1MjAzIC0xLjEyNTg3MywtMC42MzgyOSB6IgogICAgICAgaWQ9InBhdGgzNzAyLTUiIC8+CiAgICA8cGF0aAogICAgICAgc3R5bGU9InN0cm9rZS13aWR0aDowLjE2NzQzMjc3IgogICAgICAgZD0ibSAzNi45MDkzNzUsMjkzLjcyOTYgLTEuNzgyNTY1LC0wLjI3OTQxIC0wLjc5NzEyMywtMS43NDE4NyAtMC43OTcxMjQsMS43NDE4NyAtMS43ODI1NjMsMC4yNzk0MSAxLjI4OTg0MiwxLjM1NTg2IC0wLjMwNDU2MiwxLjkxNDUzIDEuNTk0NDA3LC0wLjkwMzk4IDEuNTk0NDA5LDAuOTAzOTggLTAuMzA0NTY1LC0xLjkxNDUzIHogbSAtMi41Nzk2ODgsMS45MzY3NyAtMS4xMjU4NzMsMC42MzgyOSAwLjIxNTA4MywtMS4zNTIwMyAtMC45MTA5NTMsLTAuOTU3NTIgMS4yNTg4ODgsLTAuMTk3MTkgMC41NjMwMTYsLTEuMjMwMTQgMC41NjMwMTcsMS4yMzAxNCAxLjI1ODcyNywwLjE5NzE5IC0wLjkxMDk1MiwwLjk1NzUyIDAuMjE1MDgxLDEuMzUyMDMgLTEuMTI1ODczLC0wLjYzODI5IHoiCiAgICAgICBpZD0icGF0aDM3MDItMzIiIC8+CiAgICA8cGF0aAogICAgICAgc3R5bGU9InN0cm9rZS13aWR0aDowLjE2NzQzMjc3IgogICAgICAgZD0ibSA0Mi4yMDEwNDIsMjkzLjcyOTYgLTEuNzgyNTY1LC0wLjI3OTQxIC0wLjc5NzEyMywtMS43NDE4NyAtMC43OTcxMjQsMS43NDE4NyAtMS43ODI1NjMsMC4yNzk0MSAxLjI4OTg0MiwxLjM1NTg2IC0wLjMwNDU2MiwxLjkxNDUzIDEuNTk0NDA3LC0wLjkwMzk4IDEuNTk0NDA5LDAuOTAzOTggLTAuMzA0NTY1LC0xLjkxNDUzIHogbSAtMi41Nzk2ODgsMS45MzY3NyAtMS4xMjU4NzMsMC42MzgyOSAwLjIxNTA4MywtMS4zNTIwMyAtMC45MTA5NTMsLTAuOTU3NTIgMS4yNTg4ODgsLTAuMTk3MTkgMC41NjMwMTYsLTEuMjMwMTQgMC41NjMwMTcsMS4yMzAxNCAxLjI1ODcyNywwLjE5NzE5IC0wLjkxMDk1MiwwLjk1NzUyIDAuMjE1MDgxLDEuMzUyMDMgLTEuMTI1ODczLC0wLjYzODI5IHoiCiAgICAgICBpZD0icGF0aDM3MDItNyIgLz4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0ic3Ryb2tlLXdpZHRoOjAuMTY3NDMyNzciCiAgICAgICBkPSJtIDQ3LjQ5MjcwOSwyOTMuNzI5NiAtMS43ODI1NjUsLTAuMjc5NDEgLTAuNzk3MTIzLC0xLjc0MTg3IC0wLjc5NzEyNCwxLjc0MTg3IC0xLjc4MjU2MywwLjI3OTQxIDEuMjg5ODQyLDEuMzU1ODYgLTAuMzA0NTYyLDEuOTE0NTMgMS41OTQ0MDcsLTAuOTAzOTggMS41OTQ0MDksMC45MDM5OCAtMC4zMDQ1NjUsLTEuOTE0NTMgeiBtIC0yLjU3OTY4OCwxLjkzNjc3IC0xLjEyNTg3MiwwLjYzODI5IDAuMjE1MDgzLC0xLjM1MjAzIC0wLjkxMDk1NCwtMC45NTc1MiAxLjI1ODg4OCwtMC4xOTcxOSAwLjU2MzAxNywtMS4yMzAxNCAwLjU2MzAxNiwxLjIzMDE0IDEuMjU4NzI3LDAuMTk3MTkgLTAuOTEwOTUyLDAuOTU3NTIgMC4yMTUwODEsMS4zNTIwMyAtMS4xMjU4NzIsLTAuNjM4MjkgeiIKICAgICAgIGlkPSJwYXRoMzcwMi0xIiAvPgogICAgPHBhdGgKICAgICAgIHN0eWxlPSJzdHJva2Utd2lkdGg6MC4xNjk1NjU3NSIKICAgICAgIGQ9Im0gNTIuOTE2NjY3LDI5My43Mjk2IC0xLjgyODI3MiwtMC4yNzk0MSAtMC44MTc1NjIsLTEuNzQxODcgLTAuODE3NTYzLDEuNzQxODcgLTEuODI4MjcsMC4yNzk0MSAxLjMyMjkxNSwxLjM1NTg2IC0wLjMxMjM3MSwxLjkxNDUzIDEuNjM1Mjg5LC0wLjkwMzk4IDEuNjM1MjkxLDAuOTAzOTggLTAuMzEyMzc0LC0xLjkxNDUzIHogbSAtMi42NDU4MzQsMS45MzY3NyAtMS4xNTQ3NDEsMC42MzgyOSAwLjIyMDU5NywtMS4zNTIwMyAtMC45MzQzMTEsLTAuOTU3NTIgMS4yOTExNjgsLTAuMTk3MTkgMC41Nzc0NTMsLTEuMjMwMTQgMC41Nzc0NTIsMS4yMzAxNCAxLjI5MTAwMiwwLjE5NzE5IC0wLjkzNDMwOSwwLjk1NzUyIDAuMjIwNTk2LDEuMzUyMDMgLTEuMTU0NzQxLC0wLjYzODI5IHoiCiAgICAgICBpZD0icGF0aDM3MDItMCIgLz4KICA8L2c+Cjwvc3ZnPg==');
	background-repeat: no-repeat;
	background-size: cover;

	position: absolute;
	z-index: 1;
	width: 100%;
	height: 100%;
	list-style: none;
}

.rating-new > ul > li:first-child {
	background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgaWQ9InN2ZzgiCiAgIHZlcnNpb249IjEuMSIKICAgdmlld0JveD0iMCAwIDUyLjkxNjY2NSA1LjI5MTY2NjgiCiAgIGhlaWdodD0iMjAiCiAgIHdpZHRoPSIyMDAiPgogIDxkZWZzCiAgICAgaWQ9ImRlZnMyIiAvPgogIDxtZXRhZGF0YQogICAgIGlkPSJtZXRhZGF0YTUiPgogICAgPHJkZjpSREY+CiAgICAgIDxjYzpXb3JrCiAgICAgICAgIHJkZjphYm91dD0iIj4KICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4KICAgICAgICA8ZGM6dHlwZQogICAgICAgICAgIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiIC8+CiAgICAgICAgPGRjOnRpdGxlPjwvZGM6dGl0bGU+CiAgICAgIDwvY2M6V29yaz4KICAgIDwvcmRmOlJERj4KICA8L21ldGFkYXRhPgogIDxnCiAgICAgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCwtMjkxLjcwODMyKSIKICAgICBpZD0ibGF5ZXIxIj4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0ic3Ryb2tlLXdpZHRoOjAuMTY3NDMyNjg7ZmlsbDojMDA2MmI1O2ZpbGwtb3BhY2l0eToxIgogICAgICAgZD0iTSA1LjE1OTM3NSwyOTMuNzI5NiAzLjM3NjgxMDksMjkzLjQ1MDE4IDIuNTc5Njg3NSwyOTEuNzA4MzIgMS43ODI1NjQsMjkzLjQ1MDE4IDAsMjkzLjcyOTYgbCAxLjI4OTg0MzgsMS4zNTU4NiAtMC4zMDQ1NjQ0MywxLjkxNDUzIDEuNTk0NDA4MTMsLTAuOTAzOTcgMS41OTQ0MDgxLDAuOTAzOTcgLTAuMzA0NTY0MywtMS45MTQ1MyB6IgogICAgICAgaWQ9InBhdGgxMiIgLz4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0iZmlsbDojMDA2MmI1O2ZpbGwtb3BhY2l0eToxO3N0cm9rZS13aWR0aDowLjE2NzQzMjY4IgogICAgICAgZD0ibSAxMC40NTEwNDEsMjkzLjcyOTYgLTEuNzgyNTYzOCwtMC4yNzk0MiAtMC43OTcxMjMsLTEuNzQxODYgLTAuNzk3MTIzNiwxLjc0MTg2IC0xLjc4MjU2NCwwLjI3OTQyIDEuMjg5ODQzOCwxLjM1NTg2IC0wLjMwNDU2NDQsMS45MTQ1MyAxLjU5NDQwODIsLTAuOTAzOTcgMS41OTQ0MDgsMC45MDM5NyAtMC4zMDQ1NjQsLTEuOTE0NTMgeiIKICAgICAgIGlkPSJwYXRoMTItOCIgLz4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0iZmlsbDojMDA2MmI1O2ZpbGwtb3BhY2l0eToxO3N0cm9rZS13aWR0aDowLjE2NzQzMjY4IgogICAgICAgZD0ibSAxNS43NDI3MDgsMjkzLjcyOTYgLTEuNzgyNTY1LC0wLjI3OTQyIC0wLjc5NzEyMywtMS43NDE4NiAtMC43OTcxMjMsMS43NDE4NiAtMS43ODI1NjQsMC4yNzk0MiAxLjI4OTg0MywxLjM1NTg2IC0wLjMwNDU2NCwxLjkxNDUzIDEuNTk0NDA4LC0wLjkwMzk3IDEuNTk0NDA4LDAuOTAzOTcgLTAuMzA0NTY0LC0xLjkxNDUzIHoiCiAgICAgICBpZD0icGF0aDEyLTQiIC8+CiAgICA8cGF0aAogICAgICAgc3R5bGU9ImZpbGw6IzAwNjJiNTtmaWxsLW9wYWNpdHk6MTtzdHJva2Utd2lkdGg6MC4xNjc0MzI2OCIKICAgICAgIGQ9Im0gMjEuMDM0Mzc1LDI5My43Mjk2IC0xLjc4MjU2NSwtMC4yNzk0MiAtMC43OTcxMjMsLTEuNzQxODYgLTAuNzk3MTIzLDEuNzQxODYgLTEuNzgyNTY0LDAuMjc5NDIgMS4yODk4NDMsMS4zNTU4NiAtMC4zMDQ1NjQsMS45MTQ1MyAxLjU5NDQwOCwtMC45MDM5NyAxLjU5NDQwOCwwLjkwMzk3IC0wLjMwNDU2NCwtMS45MTQ1MyB6IgogICAgICAgaWQ9InBhdGgxMi0wIiAvPgogICAgPHBhdGgKICAgICAgIHN0eWxlPSJmaWxsOiMwMDYyYjU7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlLXdpZHRoOjAuMTY3NDMyNjgiCiAgICAgICBkPSJtIDI2LjMyNjA0MiwyOTMuNzI5NiAtMS43ODI1NjQsLTAuMjc5NDIgLTAuNzk3MTIzLC0xLjc0MTg2IC0wLjc5NzEyNCwxLjc0MTg2IC0xLjc4MjU2NCwwLjI3OTQyIDEuMjg5ODQ0LDEuMzU1ODYgLTAuMzA0NTY1LDEuOTE0NTMgMS41OTQ0MDksLTAuOTAzOTcgMS41OTQ0MDgsMC45MDM5NyAtMC4zMDQ1NjUsLTEuOTE0NTMgeiIKICAgICAgIGlkPSJwYXRoMTItNiIgLz4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0iZmlsbDojMDA2MmI1O2ZpbGwtb3BhY2l0eToxO3N0cm9rZS13aWR0aDowLjE2NzQzMjY4IgogICAgICAgZD0ibSAzMS42MTc3MDgsMjkzLjcyOTYgLTEuNzgyNTY0LC0wLjI3OTQyIC0wLjc5NzEyMywtMS43NDE4NiAtMC43OTcxMjQsMS43NDE4NiAtMS43ODI1NjQsMC4yNzk0MiAxLjI4OTg0NCwxLjM1NTg2IC0wLjMwNDU2NCwxLjkxNDUzIDEuNTk0NDA4LC0wLjkwMzk3IDEuNTk0NDA4LDAuOTAzOTcgLTAuMzA0NTY1LC0xLjkxNDUzIHoiCiAgICAgICBpZD0icGF0aDEyLTciIC8+CiAgICA8cGF0aAogICAgICAgc3R5bGU9ImZpbGw6IzAwNjJiNTtmaWxsLW9wYWNpdHk6MTtzdHJva2Utd2lkdGg6MC4xNjc0MzI2OCIKICAgICAgIGQ9Im0gMzYuOTA5Mzc1LDI5My43Mjk2IC0xLjc4MjU2NSwtMC4yNzk0MiAtMC43OTcxMjMsLTEuNzQxODYgLTAuNzk3MTIzLDEuNzQxODYgLTEuNzgyNTY0LDAuMjc5NDIgMS4yODk4NDMsMS4zNTU4NiAtMC4zMDQ1NjQsMS45MTQ1MyAxLjU5NDQwOCwtMC45MDM5NyAxLjU5NDQwOCwwLjkwMzk3IC0wLjMwNDU2NCwtMS45MTQ1MyB6IgogICAgICAgaWQ9InBhdGgxMi01IiAvPgogICAgPHBhdGgKICAgICAgIHN0eWxlPSJmaWxsOiMwMDYyYjU7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlLXdpZHRoOjAuMTY3NDMyNjgiCiAgICAgICBkPSJtIDQyLjIwMTA0MiwyOTMuNzI5NiAtMS43ODI1NjQsLTAuMjc5NDIgLTAuNzk3MTIzLC0xLjc0MTg2IC0wLjc5NzEyNCwxLjc0MTg2IC0xLjc4MjU2NCwwLjI3OTQyIDEuMjg5ODQ0LDEuMzU1ODYgLTAuMzA0NTY0LDEuOTE0NTMgMS41OTQ0MDgsLTAuOTAzOTcgMS41OTQ0MDgsMC45MDM5NyAtMC4zMDQ1NjQsLTEuOTE0NTMgeiIKICAgICAgIGlkPSJwYXRoMTItNjIiIC8+CiAgICA8cGF0aAogICAgICAgc3R5bGU9ImZpbGw6IzAwNjJiNTtmaWxsLW9wYWNpdHk6MTtzdHJva2Utd2lkdGg6MC4xNjc0MzI2OCIKICAgICAgIGQ9Im0gNDcuNDkyNzA4LDI5My43Mjk2IC0xLjc4MjU2NCwtMC4yNzk0MiAtMC43OTcxMjQsLTEuNzQxODYgLTAuNzk3MTIzLDEuNzQxODYgLTEuNzgyNTY0LDAuMjc5NDIgMS4yODk4NDQsMS4zNTU4NiAtMC4zMDQ1NjUsMS45MTQ1MyAxLjU5NDQwOCwtMC45MDM5NyAxLjU5NDQwOSwwLjkwMzk3IC0wLjMwNDU2NSwtMS45MTQ1MyB6IgogICAgICAgaWQ9InBhdGgxMi00NiIgLz4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0iZmlsbDojMDA2MmI1O2ZpbGwtb3BhY2l0eToxO3N0cm9rZS13aWR0aDowLjE2OTU2NTY2IgogICAgICAgZD0ibSA1Mi45MTY2NjcsMjkzLjcyOTYgLTEuODI4MjcyLC0wLjI3OTQyIC0wLjgxNzU2MiwtMS43NDE4NiAtMC44MTc1NjIsMS43NDE4NiAtMS44MjgyNzEsMC4yNzk0MiAxLjMyMjkxNiwxLjM1NTg2IC0wLjMxMjM3MywxLjkxNDUzIDEuNjM1MjksLTAuOTAzOTcgMS42MzUyOSwwLjkwMzk3IC0wLjMxMjM3MywtMS45MTQ1MyB6IgogICAgICAgaWQ9InBhdGgxMi02NyIgLz4KICA8L2c+Cjwvc3ZnPg==');
	background-repeat: no-repeat;
	background-size: cover;

	position: absolute;
	z-index: 2;
	height: 100%;
}

.star-item {
	float: right;
  display: block;
	width: 10%;
	height: 100%;
}

.star-item > span {
	display: block;
	width: 10%;
	height: 100%;
  position: absolute;
  z-index: 20;
  cursor: pointer;
}

.star-item > span:hover {
	background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgaWQ9InN2ZzgiCiAgIHZlcnNpb249IjEuMSIKICAgdmlld0JveD0iMCAwIDUyLjkxNjY2NSA1LjI5MTY2NjgiCiAgIGhlaWdodD0iMjAiCiAgIHdpZHRoPSIyMDAiPgogIDxkZWZzCiAgICAgaWQ9ImRlZnMyIiAvPgogIDxtZXRhZGF0YQogICAgIGlkPSJtZXRhZGF0YTUiPgogICAgPHJkZjpSREY+CiAgICAgIDxjYzpXb3JrCiAgICAgICAgIHJkZjphYm91dD0iIj4KICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4KICAgICAgICA8ZGM6dHlwZQogICAgICAgICAgIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiIC8+CiAgICAgICAgPGRjOnRpdGxlPjwvZGM6dGl0bGU+CiAgICAgIDwvY2M6V29yaz4KICAgIDwvcmRmOlJERj4KICA8L21ldGFkYXRhPgogIDxnCiAgICAgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCwtMjkxLjcwODMyKSIKICAgICBpZD0ibGF5ZXIxIj4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0ic3Ryb2tlLXdpZHRoOjAuMTY3NDMyNjg7ZmlsbDojZmYwMDAwO2ZpbGwtb3BhY2l0eToxIgogICAgICAgZD0iTSA1LjE1OTM3NSwyOTMuNzI5NiAzLjM3NjgxMDksMjkzLjQ1MDE4IDIuNTc5Njg3NSwyOTEuNzA4MzIgMS43ODI1NjQsMjkzLjQ1MDE4IDAsMjkzLjcyOTYgbCAxLjI4OTg0MzgsMS4zNTU4NiAtMC4zMDQ1NjQ0MywxLjkxNDUzIDEuNTk0NDA4MTMsLTAuOTAzOTcgMS41OTQ0MDgxLDAuOTAzOTcgLTAuMzA0NTY0MywtMS45MTQ1MyB6IgogICAgICAgaWQ9InBhdGgxMiIgLz4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0iZmlsbDojZmYwMDAwO2ZpbGwtb3BhY2l0eToxO3N0cm9rZS13aWR0aDowLjE2NzQzMjY4IgogICAgICAgZD0ibSAxMC40NTEwNDEsMjkzLjcyOTYgLTEuNzgyNTYzOCwtMC4yNzk0MiAtMC43OTcxMjMsLTEuNzQxODYgLTAuNzk3MTIzNiwxLjc0MTg2IC0xLjc4MjU2NCwwLjI3OTQyIDEuMjg5ODQzOCwxLjM1NTg2IC0wLjMwNDU2NDQsMS45MTQ1MyAxLjU5NDQwODIsLTAuOTAzOTcgMS41OTQ0MDgsMC45MDM5NyAtMC4zMDQ1NjQsLTEuOTE0NTMgeiIKICAgICAgIGlkPSJwYXRoMTItOCIgLz4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0iZmlsbDojZmYwMDAwO2ZpbGwtb3BhY2l0eToxO3N0cm9rZS13aWR0aDowLjE2NzQzMjY4IgogICAgICAgZD0ibSAxNS43NDI3MDgsMjkzLjcyOTYgLTEuNzgyNTY1LC0wLjI3OTQyIC0wLjc5NzEyMywtMS43NDE4NiAtMC43OTcxMjMsMS43NDE4NiAtMS43ODI1NjQsMC4yNzk0MiAxLjI4OTg0MywxLjM1NTg2IC0wLjMwNDU2NCwxLjkxNDUzIDEuNTk0NDA4LC0wLjkwMzk3IDEuNTk0NDA4LDAuOTAzOTcgLTAuMzA0NTY0LC0xLjkxNDUzIHoiCiAgICAgICBpZD0icGF0aDEyLTQiIC8+CiAgICA8cGF0aAogICAgICAgc3R5bGU9ImZpbGw6I2ZmMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2Utd2lkdGg6MC4xNjc0MzI2OCIKICAgICAgIGQ9Im0gMjEuMDM0Mzc1LDI5My43Mjk2IC0xLjc4MjU2NSwtMC4yNzk0MiAtMC43OTcxMjMsLTEuNzQxODYgLTAuNzk3MTIzLDEuNzQxODYgLTEuNzgyNTY0LDAuMjc5NDIgMS4yODk4NDMsMS4zNTU4NiAtMC4zMDQ1NjQsMS45MTQ1MyAxLjU5NDQwOCwtMC45MDM5NyAxLjU5NDQwOCwwLjkwMzk3IC0wLjMwNDU2NCwtMS45MTQ1MyB6IgogICAgICAgaWQ9InBhdGgxMi0wIiAvPgogICAgPHBhdGgKICAgICAgIHN0eWxlPSJmaWxsOiNmZjAwMDA7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlLXdpZHRoOjAuMTY3NDMyNjgiCiAgICAgICBkPSJtIDI2LjMyNjA0MiwyOTMuNzI5NiAtMS43ODI1NjQsLTAuMjc5NDIgLTAuNzk3MTIzLC0xLjc0MTg2IC0wLjc5NzEyNCwxLjc0MTg2IC0xLjc4MjU2NCwwLjI3OTQyIDEuMjg5ODQ0LDEuMzU1ODYgLTAuMzA0NTY1LDEuOTE0NTMgMS41OTQ0MDksLTAuOTAzOTcgMS41OTQ0MDgsMC45MDM5NyAtMC4zMDQ1NjUsLTEuOTE0NTMgeiIKICAgICAgIGlkPSJwYXRoMTItNiIgLz4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0iZmlsbDojZmYwMDAwO2ZpbGwtb3BhY2l0eToxO3N0cm9rZS13aWR0aDowLjE2NzQzMjY4IgogICAgICAgZD0ibSAzMS42MTc3MDgsMjkzLjcyOTYgLTEuNzgyNTY0LC0wLjI3OTQyIC0wLjc5NzEyMywtMS43NDE4NiAtMC43OTcxMjQsMS43NDE4NiAtMS43ODI1NjQsMC4yNzk0MiAxLjI4OTg0NCwxLjM1NTg2IC0wLjMwNDU2NCwxLjkxNDUzIDEuNTk0NDA4LC0wLjkwMzk3IDEuNTk0NDA4LDAuOTAzOTcgLTAuMzA0NTY1LC0xLjkxNDUzIHoiCiAgICAgICBpZD0icGF0aDEyLTciIC8+CiAgICA8cGF0aAogICAgICAgc3R5bGU9ImZpbGw6I2ZmMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2Utd2lkdGg6MC4xNjc0MzI2OCIKICAgICAgIGQ9Im0gMzYuOTA5Mzc1LDI5My43Mjk2IC0xLjc4MjU2NSwtMC4yNzk0MiAtMC43OTcxMjMsLTEuNzQxODYgLTAuNzk3MTIzLDEuNzQxODYgLTEuNzgyNTY0LDAuMjc5NDIgMS4yODk4NDMsMS4zNTU4NiAtMC4zMDQ1NjQsMS45MTQ1MyAxLjU5NDQwOCwtMC45MDM5NyAxLjU5NDQwOCwwLjkwMzk3IC0wLjMwNDU2NCwtMS45MTQ1MyB6IgogICAgICAgaWQ9InBhdGgxMi01IiAvPgogICAgPHBhdGgKICAgICAgIHN0eWxlPSJmaWxsOiNmZjAwMDA7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlLXdpZHRoOjAuMTY3NDMyNjgiCiAgICAgICBkPSJtIDQyLjIwMTA0MiwyOTMuNzI5NiAtMS43ODI1NjQsLTAuMjc5NDIgLTAuNzk3MTIzLC0xLjc0MTg2IC0wLjc5NzEyNCwxLjc0MTg2IC0xLjc4MjU2NCwwLjI3OTQyIDEuMjg5ODQ0LDEuMzU1ODYgLTAuMzA0NTY0LDEuOTE0NTMgMS41OTQ0MDgsLTAuOTAzOTcgMS41OTQ0MDgsMC45MDM5NyAtMC4zMDQ1NjQsLTEuOTE0NTMgeiIKICAgICAgIGlkPSJwYXRoMTItNjIiIC8+CiAgICA8cGF0aAogICAgICAgc3R5bGU9ImZpbGw6I2ZmMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2Utd2lkdGg6MC4xNjc0MzI2OCIKICAgICAgIGQ9Im0gNDcuNDkyNzA4LDI5My43Mjk2IC0xLjc4MjU2NCwtMC4yNzk0MiAtMC43OTcxMjQsLTEuNzQxODYgLTAuNzk3MTIzLDEuNzQxODYgLTEuNzgyNTY0LDAuMjc5NDIgMS4yODk4NDQsMS4zNTU4NiAtMC4zMDQ1NjUsMS45MTQ1MyAxLjU5NDQwOCwtMC45MDM5NyAxLjU5NDQwOSwwLjkwMzk3IC0wLjMwNDU2NSwtMS45MTQ1MyB6IgogICAgICAgaWQ9InBhdGgxMi00NiIgLz4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0iZmlsbDojZmYwMDAwO2ZpbGwtb3BhY2l0eToxO3N0cm9rZS13aWR0aDowLjE2OTU2NTY2IgogICAgICAgZD0ibSA1Mi45MTY2NjcsMjkzLjcyOTYgLTEuODI4MjcyLC0wLjI3OTQyIC0wLjgxNzU2MiwtMS43NDE4NiAtMC44MTc1NjIsMS43NDE4NiAtMS44MjgyNzEsMC4yNzk0MiAxLjMyMjkxNiwxLjM1NTg2IC0wLjMxMjM3MywxLjkxNDUzIDEuNjM1MjksLTAuOTAzOTcgMS42MzUyOSwwLjkwMzk3IC0wLjMxMjM3MywtMS45MTQ1MyB6IgogICAgICAgaWQ9InBhdGgxMi02NyIgLz4KICA8L2c+Cjwvc3ZnPg==');
	background-repeat: no-repeat;
	background-size: cover;
}

.star-item:hover ~ .star-item > span {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgaWQ9InN2ZzgiCiAgIHZlcnNpb249IjEuMSIKICAgdmlld0JveD0iMCAwIDUyLjkxNjY2NSA1LjI5MTY2NjgiCiAgIGhlaWdodD0iMjAiCiAgIHdpZHRoPSIyMDAiPgogIDxkZWZzCiAgICAgaWQ9ImRlZnMyIiAvPgogIDxtZXRhZGF0YQogICAgIGlkPSJtZXRhZGF0YTUiPgogICAgPHJkZjpSREY+CiAgICAgIDxjYzpXb3JrCiAgICAgICAgIHJkZjphYm91dD0iIj4KICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4KICAgICAgICA8ZGM6dHlwZQogICAgICAgICAgIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiIC8+CiAgICAgICAgPGRjOnRpdGxlPjwvZGM6dGl0bGU+CiAgICAgIDwvY2M6V29yaz4KICAgIDwvcmRmOlJERj4KICA8L21ldGFkYXRhPgogIDxnCiAgICAgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCwtMjkxLjcwODMyKSIKICAgICBpZD0ibGF5ZXIxIj4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0ic3Ryb2tlLXdpZHRoOjAuMTY3NDMyNjg7ZmlsbDojZmYwMDAwO2ZpbGwtb3BhY2l0eToxIgogICAgICAgZD0iTSA1LjE1OTM3NSwyOTMuNzI5NiAzLjM3NjgxMDksMjkzLjQ1MDE4IDIuNTc5Njg3NSwyOTEuNzA4MzIgMS43ODI1NjQsMjkzLjQ1MDE4IDAsMjkzLjcyOTYgbCAxLjI4OTg0MzgsMS4zNTU4NiAtMC4zMDQ1NjQ0MywxLjkxNDUzIDEuNTk0NDA4MTMsLTAuOTAzOTcgMS41OTQ0MDgxLDAuOTAzOTcgLTAuMzA0NTY0MywtMS45MTQ1MyB6IgogICAgICAgaWQ9InBhdGgxMiIgLz4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0iZmlsbDojZmYwMDAwO2ZpbGwtb3BhY2l0eToxO3N0cm9rZS13aWR0aDowLjE2NzQzMjY4IgogICAgICAgZD0ibSAxMC40NTEwNDEsMjkzLjcyOTYgLTEuNzgyNTYzOCwtMC4yNzk0MiAtMC43OTcxMjMsLTEuNzQxODYgLTAuNzk3MTIzNiwxLjc0MTg2IC0xLjc4MjU2NCwwLjI3OTQyIDEuMjg5ODQzOCwxLjM1NTg2IC0wLjMwNDU2NDQsMS45MTQ1MyAxLjU5NDQwODIsLTAuOTAzOTcgMS41OTQ0MDgsMC45MDM5NyAtMC4zMDQ1NjQsLTEuOTE0NTMgeiIKICAgICAgIGlkPSJwYXRoMTItOCIgLz4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0iZmlsbDojZmYwMDAwO2ZpbGwtb3BhY2l0eToxO3N0cm9rZS13aWR0aDowLjE2NzQzMjY4IgogICAgICAgZD0ibSAxNS43NDI3MDgsMjkzLjcyOTYgLTEuNzgyNTY1LC0wLjI3OTQyIC0wLjc5NzEyMywtMS43NDE4NiAtMC43OTcxMjMsMS43NDE4NiAtMS43ODI1NjQsMC4yNzk0MiAxLjI4OTg0MywxLjM1NTg2IC0wLjMwNDU2NCwxLjkxNDUzIDEuNTk0NDA4LC0wLjkwMzk3IDEuNTk0NDA4LDAuOTAzOTcgLTAuMzA0NTY0LC0xLjkxNDUzIHoiCiAgICAgICBpZD0icGF0aDEyLTQiIC8+CiAgICA8cGF0aAogICAgICAgc3R5bGU9ImZpbGw6I2ZmMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2Utd2lkdGg6MC4xNjc0MzI2OCIKICAgICAgIGQ9Im0gMjEuMDM0Mzc1LDI5My43Mjk2IC0xLjc4MjU2NSwtMC4yNzk0MiAtMC43OTcxMjMsLTEuNzQxODYgLTAuNzk3MTIzLDEuNzQxODYgLTEuNzgyNTY0LDAuMjc5NDIgMS4yODk4NDMsMS4zNTU4NiAtMC4zMDQ1NjQsMS45MTQ1MyAxLjU5NDQwOCwtMC45MDM5NyAxLjU5NDQwOCwwLjkwMzk3IC0wLjMwNDU2NCwtMS45MTQ1MyB6IgogICAgICAgaWQ9InBhdGgxMi0wIiAvPgogICAgPHBhdGgKICAgICAgIHN0eWxlPSJmaWxsOiNmZjAwMDA7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlLXdpZHRoOjAuMTY3NDMyNjgiCiAgICAgICBkPSJtIDI2LjMyNjA0MiwyOTMuNzI5NiAtMS43ODI1NjQsLTAuMjc5NDIgLTAuNzk3MTIzLC0xLjc0MTg2IC0wLjc5NzEyNCwxLjc0MTg2IC0xLjc4MjU2NCwwLjI3OTQyIDEuMjg5ODQ0LDEuMzU1ODYgLTAuMzA0NTY1LDEuOTE0NTMgMS41OTQ0MDksLTAuOTAzOTcgMS41OTQ0MDgsMC45MDM5NyAtMC4zMDQ1NjUsLTEuOTE0NTMgeiIKICAgICAgIGlkPSJwYXRoMTItNiIgLz4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0iZmlsbDojZmYwMDAwO2ZpbGwtb3BhY2l0eToxO3N0cm9rZS13aWR0aDowLjE2NzQzMjY4IgogICAgICAgZD0ibSAzMS42MTc3MDgsMjkzLjcyOTYgLTEuNzgyNTY0LC0wLjI3OTQyIC0wLjc5NzEyMywtMS43NDE4NiAtMC43OTcxMjQsMS43NDE4NiAtMS43ODI1NjQsMC4yNzk0MiAxLjI4OTg0NCwxLjM1NTg2IC0wLjMwNDU2NCwxLjkxNDUzIDEuNTk0NDA4LC0wLjkwMzk3IDEuNTk0NDA4LDAuOTAzOTcgLTAuMzA0NTY1LC0xLjkxNDUzIHoiCiAgICAgICBpZD0icGF0aDEyLTciIC8+CiAgICA8cGF0aAogICAgICAgc3R5bGU9ImZpbGw6I2ZmMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2Utd2lkdGg6MC4xNjc0MzI2OCIKICAgICAgIGQ9Im0gMzYuOTA5Mzc1LDI5My43Mjk2IC0xLjc4MjU2NSwtMC4yNzk0MiAtMC43OTcxMjMsLTEuNzQxODYgLTAuNzk3MTIzLDEuNzQxODYgLTEuNzgyNTY0LDAuMjc5NDIgMS4yODk4NDMsMS4zNTU4NiAtMC4zMDQ1NjQsMS45MTQ1MyAxLjU5NDQwOCwtMC45MDM5NyAxLjU5NDQwOCwwLjkwMzk3IC0wLjMwNDU2NCwtMS45MTQ1MyB6IgogICAgICAgaWQ9InBhdGgxMi01IiAvPgogICAgPHBhdGgKICAgICAgIHN0eWxlPSJmaWxsOiNmZjAwMDA7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlLXdpZHRoOjAuMTY3NDMyNjgiCiAgICAgICBkPSJtIDQyLjIwMTA0MiwyOTMuNzI5NiAtMS43ODI1NjQsLTAuMjc5NDIgLTAuNzk3MTIzLC0xLjc0MTg2IC0wLjc5NzEyNCwxLjc0MTg2IC0xLjc4MjU2NCwwLjI3OTQyIDEuMjg5ODQ0LDEuMzU1ODYgLTAuMzA0NTY0LDEuOTE0NTMgMS41OTQ0MDgsLTAuOTAzOTcgMS41OTQ0MDgsMC45MDM5NyAtMC4zMDQ1NjQsLTEuOTE0NTMgeiIKICAgICAgIGlkPSJwYXRoMTItNjIiIC8+CiAgICA8cGF0aAogICAgICAgc3R5bGU9ImZpbGw6I2ZmMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2Utd2lkdGg6MC4xNjc0MzI2OCIKICAgICAgIGQ9Im0gNDcuNDkyNzA4LDI5My43Mjk2IC0xLjc4MjU2NCwtMC4yNzk0MiAtMC43OTcxMjQsLTEuNzQxODYgLTAuNzk3MTIzLDEuNzQxODYgLTEuNzgyNTY0LDAuMjc5NDIgMS4yODk4NDQsMS4zNTU4NiAtMC4zMDQ1NjUsMS45MTQ1MyAxLjU5NDQwOCwtMC45MDM5NyAxLjU5NDQwOSwwLjkwMzk3IC0wLjMwNDU2NSwtMS45MTQ1MyB6IgogICAgICAgaWQ9InBhdGgxMi00NiIgLz4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0iZmlsbDojZmYwMDAwO2ZpbGwtb3BhY2l0eToxO3N0cm9rZS13aWR0aDowLjE2OTU2NTY2IgogICAgICAgZD0ibSA1Mi45MTY2NjcsMjkzLjcyOTYgLTEuODI4MjcyLC0wLjI3OTQyIC0wLjgxNzU2MiwtMS43NDE4NiAtMC44MTc1NjIsMS43NDE4NiAtMS44MjgyNzEsMC4yNzk0MiAxLjMyMjkxNiwxLjM1NTg2IC0wLjMxMjM3MywxLjkxNDUzIDEuNjM1MjksLTAuOTAzOTcgMS42MzUyOSwwLjkwMzk3IC0wLjMxMjM3MywtMS45MTQ1MyB6IgogICAgICAgaWQ9InBhdGgxMi02NyIgLz4KICA8L2c+Cjwvc3ZnPg==');
	background-repeat: no-repeat;
	background-size: cover
}


	
		
		
		
		
		
		
		
		
		
		
		
	






Еще раз спасибо)))

воскресенье, 16 февраля 2020 г.

Как сделать плавную смену css градиента при наведении

#html #css #css3 #вёрстка #hover


Как можно сделать плавную смену фона (градиент на градиент) при наведении hover на
элемент. Сделал кнопку, дал ей все необходимые стили, включая transition для плавности
эффекта наведения, но при этом смена фона происходит резко, а все остальные эффекты
в виде изменения тени, как положено меняются плавно. 



.btn_default {
	display: inline-block;
	min-width: 200px;
	font-family: $bold;
	font-size: 1.125em;
	margin-top: 10px;
	padding: 13px 20px;
	text-align: center;
	color: #fff;
	outline: none;
	border-radius: 30px;
	background: linear-gradient(0deg, rgb(158, 48, 160), rgb(213, 80, 298));
	box-shadow: 0 2px 7px rgba(213, 80, 208, 0.6);
	transition: all 0.5s;
}

.btn_default:hover {
		color: #fff;
		text-decoration: none;
		background: linear-gradient(0deg, rgb(101, 31, 102), rgb(173, 65, 169));
		box-shadow: 0 2px 10px rgba(213, 80, 208, 0.9);
}
Some link

Ответы

Ответ 1


Как вариант



.btn_default {
    display: inline-block;
    min-width: 200px;
    font-family: $bold;
    font-size: 1.125em;
    margin-top: 10px;
    padding: 13px 20px;
    text-align: center;
    color: #fff;
    outline: none;
    border-radius: 30px;
    background: linear-gradient(0deg, rgb(158, 48, 160), rgb(213, 80, 298));
    box-shadow: 0 2px 7px rgba(213, 80, 208, 0.6);
    position: relative;
}
.btn_default > span{
    position: relative;
    z-index: 1;
}
.btn_default:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(0deg, rgb(101, 31, 102), rgb(173, 65, 169));
    box-shadow: 0 2px 10px rgba(213, 80, 208, 0.9);
    border-radius: 30px;
    opacity: 0;
    transition: opacity 0.5s;
}

.btn_default:hover:after {
    opacity: 1;
}
Some link


Ответ 2


.btn_default {
  display: inline-block;
  min-width: 200px;
  font-weight: bold;
  font-size: 1.125em;
  margin: 10px auto;
  padding: 13px 20px;
  text-align: center;
  text-shadow: 0px 0px 1px hsla(0, 0%, 0%, .8);
  color: #fff;
  outline: none;
  border-radius: 30px;
  background: hsla(294, 53%, 47%, 1);
  box-shadow: inset .125em .125em .5em hsla(294, 53%, 40%, 1), inset -.125em -.125em
.5em hsla(294, 53%, 40%, 1), 0 2px 7px rgba(213, 80, 208, 0.6);
  transition: all .8s linear 0s;
}

.btn_default:hover {
  color: #fff;
  text-decoration: none;
  background: hsla(294, 53%, 37%, 1);
  box-shadow: inset .125em .125em .5em hsla(294, 53%, 30%, 1), inset -.125em -.125em
.5em hsla(294, 53%, 30%, 1), 0 2px 10px rgba(213, 80, 208, 0.9);
}
Some link

Не могу задать правильное поведение hover

#html #css #html5 #css3 #hover


Всем привет.
Почти сделал рейтинг со звездами, как вдруг проблема с наведением по ним...
Вот код - https://jsfiddle.net/dokgkxza/





    
        
        
        
        
        
        
        
        
        
        
        
    




С левой стороны на правую нормально работает, но если наоборот вести курсор то будет
подсвечиваться только первый элемент на который навел...

Добавил z-index: 20; к спан ховер, а к обычному спан z-index: 30; ... но это далеко
не идеал...
Код дубль 2 - https://jsfiddle.net/dokgkxza/1/

Ответы

Ответ 1


Вот работающий пример (только вместо звездочек кружочки)

.star-item span:hover ~ span label,
.star-item span:hover label,
.star-item span.checked label,
.star-item span.checked ~ span label {
    background:#F90;
    color:#FFF;
}


Как сделать звездочки без картинок на чистом css

А вобще как я понимаю это типовая задачка (даже в яндексе ее дают), есть смысл посмотреть
готовое решение и его повторить, не изобретая свой велосипед.


Ответ 2


Еще раз всем привет)))
Сделал я как нужно))) Большое спасибо Алексею Обухову, автору первого ответа.
Вся фишка оказалась во float: right; для класса star-item и в селекторе ~.
Вот код дубль 3 - https://jsfiddle.net/yhLrur49/



* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.rating-new {
	position: relative;
	overflow: hidden;
}

.rating-new::after {
	content: "";
	display: block;
	padding-bottom: 10%;
}

.rating-new > ul {
	background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgaWQ9InN2ZzgiCiAgIHZlcnNpb249IjEuMSIKICAgdmlld0JveD0iMCAwIDUyLjkxNjY2NyA1LjI5MTY2NjciCiAgIGhlaWdodD0iMjAiCiAgIHdpZHRoPSIyMDAiPgogIDxkZWZzCiAgICAgaWQ9ImRlZnMyIiAvPgogIDxtZXRhZGF0YQogICAgIGlkPSJtZXRhZGF0YTUiPgogICAgPHJkZjpSREY+CiAgICAgIDxjYzpXb3JrCiAgICAgICAgIHJkZjphYm91dD0iIj4KICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4KICAgICAgICA8ZGM6dHlwZQogICAgICAgICAgIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiIC8+CiAgICAgICAgPGRjOnRpdGxlPjwvZGM6dGl0bGU+CiAgICAgIDwvY2M6V29yaz4KICAgIDwvcmRmOlJERj4KICA8L21ldGFkYXRhPgogIDxnCiAgICAgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCwtMjkxLjcwODMyKSIKICAgICBpZD0ibGF5ZXIxIj4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0ic3Ryb2tlLXdpZHRoOjAuMTY3NDMyNzkiCiAgICAgICBkPSJtIDUuMTU5Mzc1LDI5My43Mjk2IC0xLjc4MjU2NDcsLTAuMjc5NDEgLTAuNzk3MTIzLC0xLjc0MTg3IC0wLjc5NzEyNCwxLjc0MTg3IEwgMCwyOTMuNzI5NiBsIDEuMjg5ODQyLDEuMzU1ODYgLTAuMzA0NTYxNSwxLjkxNDUzIDEuNTk0NDA2OCwtMC45MDM5OCAxLjU5NDQwODcsMC45MDM5OCAtMC4zMDQ1NjQ1LC0xLjkxNDUzIHogbSAtMi41Nzk2ODc3LDEuOTM2NzcgLTEuMTI1ODcyNSwwLjYzODI5IDAuMjE1MDgyOSwtMS4zNTIwMyAtMC45MTA5NTMyNCwtMC45NTc1MiAxLjI1ODg4NzY0LC0wLjE5NzE5IDAuNTYzMDE2NywtMS4yMzAxNCAwLjU2MzAxNjYsMS4yMzAxNCAxLjI1ODcyNjcsMC4xOTcxOSAtMC45MTA5NTE5LDAuOTU3NTIgMC4yMTUwODEsMS4zNTIwMyAtMS4xMjU4NzI0LC0wLjYzODI5IHoiCiAgICAgICBpZD0icGF0aDM3MDIiIC8+CiAgICA8cGF0aAogICAgICAgc3R5bGU9InN0cm9rZS13aWR0aDowLjE2NzQzMjc3IgogICAgICAgZD0ibSAxNS43NDI3MDgsMjkzLjcyOTYgLTEuNzgyNTY0LC0wLjI3OTQxIC0wLjc5NzEyMywtMS43NDE4NyAtMC43OTcxMjQsMS43NDE4NyAtMS43ODI1NjQsMC4yNzk0MSAxLjI4OTg0MiwxLjM1NTg2IC0wLjMwNDU2MSwxLjkxNDUzIDEuNTk0NDA3LC0wLjkwMzk4IDEuNTk0NDA5LDAuOTAzOTggLTAuMzA0NTY1LC0xLjkxNDUzIHogbSAtMi41Nzk2ODcsMS45MzY3NyAtMS4xMjU4NzMsMC42MzgyOSAwLjIxNTA4MywtMS4zNTIwMyAtMC45MTA5NTMsLTAuOTU3NTIgMS4yNTg4ODcsLTAuMTk3MTkgMC41NjMwMTcsLTEuMjMwMTQgMC41NjMwMTcsMS4yMzAxNCAxLjI1ODcyNiwwLjE5NzE5IC0wLjkxMDk1MSwwLjk1NzUyIDAuMjE1MDgxLDEuMzUyMDMgLTEuMTI1ODczLC0wLjYzODI5IHoiCiAgICAgICBpZD0icGF0aDM3MDItNiIgLz4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0ic3Ryb2tlLXdpZHRoOjAuMTY3NDMyNzciCiAgICAgICBkPSJtIDEwLjQ1MTA0MiwyOTMuNzI5NiAtMS43ODI1NjUxLC0wLjI3OTQxIC0wLjc5NzEyMjksLTEuNzQxODcgLTAuNzk3MTI0LDEuNzQxODcgLTEuNzgyNTYzMywwLjI3OTQxIDEuMjg5ODQyLDEuMzU1ODYgLTAuMzA0NTYxNSwxLjkxNDUzIDEuNTk0NDA2OCwtMC45MDM5OCAxLjU5NDQwODgsMC45MDM5OCAtMC4zMDQ1NjQ2LC0xLjkxNDUzIHogbSAtMi41Nzk2ODgsMS45MzY3NyAtMS4xMjU4NzI1LDAuNjM4MjkgMC4yMTUwODI5LC0xLjM1MjAzIC0wLjkxMDk1MzIsLTAuOTU3NTIgMS4yNTg4ODc2LC0wLjE5NzE5IDAuNTYzMDE2NywtMS4yMzAxNCAwLjU2MzAxNjUsMS4yMzAxNCAxLjI1ODcyNjcsMC4xOTcxOSAtMC45MTA5NTE3LDAuOTU3NTIgMC4yMTUwODA4LDEuMzUyMDMgLTEuMTI1ODcyMywtMC42MzgyOSB6IgogICAgICAgaWQ9InBhdGgzNzAyLTgiIC8+CiAgICA8cGF0aAogICAgICAgc3R5bGU9InN0cm9rZS13aWR0aDowLjE2NzQzMjc3IgogICAgICAgZD0ibSAyMS4wMzQzNzUsMjkzLjcyOTYgLTEuNzgyNTY1LC0wLjI3OTQxIC0wLjc5NzEyMywtMS43NDE4NyAtMC43OTcxMjQsMS43NDE4NyAtMS43ODI1NjMsMC4yNzk0MSAxLjI4OTg0MiwxLjM1NTg2IC0wLjMwNDU2MiwxLjkxNDUzIDEuNTk0NDA3LC0wLjkwMzk4IDEuNTk0NDA5LDAuOTAzOTggLTAuMzA0NTY1LC0xLjkxNDUzIHogbSAtMi41Nzk2ODgsMS45MzY3NyAtMS4xMjU4NzIsMC42MzgyOSAwLjIxNTA4MiwtMS4zNTIwMyAtMC45MTA5NTMsLTAuOTU3NTIgMS4yNTg4ODgsLTAuMTk3MTkgMC41NjMwMTcsLTEuMjMwMTQgMC41NjMwMTYsMS4yMzAxNCAxLjI1ODcyNywwLjE5NzE5IC0wLjkxMDk1MiwwLjk1NzUyIDAuMjE1MDgxLDEuMzUyMDMgLTEuMTI1ODcyLC0wLjYzODI5IHoiCiAgICAgICBpZD0icGF0aDM3MDItMiIgLz4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0ic3Ryb2tlLXdpZHRoOjAuMTY3NDMyNzciCiAgICAgICBkPSJtIDI2LjMyNjA0MiwyOTMuNzI5NiAtMS43ODI1NjUsLTAuMjc5NDEgLTAuNzk3MTIzLC0xLjc0MTg3IC0wLjc5NzEyNCwxLjc0MTg3IC0xLjc4MjU2MywwLjI3OTQxIDEuMjg5ODQyLDEuMzU1ODYgLTAuMzA0NTYyLDEuOTE0NTMgMS41OTQ0MDcsLTAuOTAzOTggMS41OTQ0MDksMC45MDM5OCAtMC4zMDQ1NjUsLTEuOTE0NTMgeiBtIC0yLjU3OTY4OCwxLjkzNjc3IC0xLjEyNTg3MywwLjYzODI5IDAuMjE1MDgzLC0xLjM1MjAzIC0wLjkxMDk1MywtMC45NTc1MiAxLjI1ODg4OCwtMC4xOTcxOSAwLjU2MzAxNiwtMS4yMzAxNCAwLjU2MzAxNywxLjIzMDE0IDEuMjU4NzI3LDAuMTk3MTkgLTAuOTEwOTUyLDAuOTU3NTIgMC4yMTUwODEsMS4zNTIwMyAtMS4xMjU4NzMsLTAuNjM4MjkgeiIKICAgICAgIGlkPSJwYXRoMzcwMi0zIiAvPgogICAgPHBhdGgKICAgICAgIHN0eWxlPSJzdHJva2Utd2lkdGg6MC4xNjc0MzI3NyIKICAgICAgIGQ9Im0gMzEuNjE3NzA5LDI5My43Mjk2IC0xLjc4MjU2NiwtMC4yNzk0MSAtMC43OTcxMjIsLTEuNzQxODcgLTAuNzk3MTI0LDEuNzQxODcgLTEuNzgyNTYzLDAuMjc5NDEgMS4yODk4NDIsMS4zNTU4NiAtMC4zMDQ1NjIsMS45MTQ1MyAxLjU5NDQwNywtMC45MDM5OCAxLjU5NDQwOCwwLjkwMzk4IC0wLjMwNDU2NSwtMS45MTQ1MyB6IG0gLTIuNTc5Njg4LDEuOTM2NzcgLTEuMTI1ODczLDAuNjM4MjkgMC4yMTUwODMsLTEuMzUyMDMgLTAuOTEwOTUzLC0wLjk1NzUyIDEuMjU4ODg4LC0wLjE5NzE5IDAuNTYzMDE2LC0xLjIzMDE0IDAuNTYzMDE3LDEuMjMwMTQgMS4yNTg3MjcsMC4xOTcxOSAtMC45MTA5NTMsMC45NTc1MiAwLjIxNTA4MiwxLjM1MjAzIC0xLjEyNTg3MywtMC42MzgyOSB6IgogICAgICAgaWQ9InBhdGgzNzAyLTUiIC8+CiAgICA8cGF0aAogICAgICAgc3R5bGU9InN0cm9rZS13aWR0aDowLjE2NzQzMjc3IgogICAgICAgZD0ibSAzNi45MDkzNzUsMjkzLjcyOTYgLTEuNzgyNTY1LC0wLjI3OTQxIC0wLjc5NzEyMywtMS43NDE4NyAtMC43OTcxMjQsMS43NDE4NyAtMS43ODI1NjMsMC4yNzk0MSAxLjI4OTg0MiwxLjM1NTg2IC0wLjMwNDU2MiwxLjkxNDUzIDEuNTk0NDA3LC0wLjkwMzk4IDEuNTk0NDA5LDAuOTAzOTggLTAuMzA0NTY1LC0xLjkxNDUzIHogbSAtMi41Nzk2ODgsMS45MzY3NyAtMS4xMjU4NzMsMC42MzgyOSAwLjIxNTA4MywtMS4zNTIwMyAtMC45MTA5NTMsLTAuOTU3NTIgMS4yNTg4ODgsLTAuMTk3MTkgMC41NjMwMTYsLTEuMjMwMTQgMC41NjMwMTcsMS4yMzAxNCAxLjI1ODcyNywwLjE5NzE5IC0wLjkxMDk1MiwwLjk1NzUyIDAuMjE1MDgxLDEuMzUyMDMgLTEuMTI1ODczLC0wLjYzODI5IHoiCiAgICAgICBpZD0icGF0aDM3MDItMzIiIC8+CiAgICA8cGF0aAogICAgICAgc3R5bGU9InN0cm9rZS13aWR0aDowLjE2NzQzMjc3IgogICAgICAgZD0ibSA0Mi4yMDEwNDIsMjkzLjcyOTYgLTEuNzgyNTY1LC0wLjI3OTQxIC0wLjc5NzEyMywtMS43NDE4NyAtMC43OTcxMjQsMS43NDE4NyAtMS43ODI1NjMsMC4yNzk0MSAxLjI4OTg0MiwxLjM1NTg2IC0wLjMwNDU2MiwxLjkxNDUzIDEuNTk0NDA3LC0wLjkwMzk4IDEuNTk0NDA5LDAuOTAzOTggLTAuMzA0NTY1LC0xLjkxNDUzIHogbSAtMi41Nzk2ODgsMS45MzY3NyAtMS4xMjU4NzMsMC42MzgyOSAwLjIxNTA4MywtMS4zNTIwMyAtMC45MTA5NTMsLTAuOTU3NTIgMS4yNTg4ODgsLTAuMTk3MTkgMC41NjMwMTYsLTEuMjMwMTQgMC41NjMwMTcsMS4yMzAxNCAxLjI1ODcyNywwLjE5NzE5IC0wLjkxMDk1MiwwLjk1NzUyIDAuMjE1MDgxLDEuMzUyMDMgLTEuMTI1ODczLC0wLjYzODI5IHoiCiAgICAgICBpZD0icGF0aDM3MDItNyIgLz4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0ic3Ryb2tlLXdpZHRoOjAuMTY3NDMyNzciCiAgICAgICBkPSJtIDQ3LjQ5MjcwOSwyOTMuNzI5NiAtMS43ODI1NjUsLTAuMjc5NDEgLTAuNzk3MTIzLC0xLjc0MTg3IC0wLjc5NzEyNCwxLjc0MTg3IC0xLjc4MjU2MywwLjI3OTQxIDEuMjg5ODQyLDEuMzU1ODYgLTAuMzA0NTYyLDEuOTE0NTMgMS41OTQ0MDcsLTAuOTAzOTggMS41OTQ0MDksMC45MDM5OCAtMC4zMDQ1NjUsLTEuOTE0NTMgeiBtIC0yLjU3OTY4OCwxLjkzNjc3IC0xLjEyNTg3MiwwLjYzODI5IDAuMjE1MDgzLC0xLjM1MjAzIC0wLjkxMDk1NCwtMC45NTc1MiAxLjI1ODg4OCwtMC4xOTcxOSAwLjU2MzAxNywtMS4yMzAxNCAwLjU2MzAxNiwxLjIzMDE0IDEuMjU4NzI3LDAuMTk3MTkgLTAuOTEwOTUyLDAuOTU3NTIgMC4yMTUwODEsMS4zNTIwMyAtMS4xMjU4NzIsLTAuNjM4MjkgeiIKICAgICAgIGlkPSJwYXRoMzcwMi0xIiAvPgogICAgPHBhdGgKICAgICAgIHN0eWxlPSJzdHJva2Utd2lkdGg6MC4xNjk1NjU3NSIKICAgICAgIGQ9Im0gNTIuOTE2NjY3LDI5My43Mjk2IC0xLjgyODI3MiwtMC4yNzk0MSAtMC44MTc1NjIsLTEuNzQxODcgLTAuODE3NTYzLDEuNzQxODcgLTEuODI4MjcsMC4yNzk0MSAxLjMyMjkxNSwxLjM1NTg2IC0wLjMxMjM3MSwxLjkxNDUzIDEuNjM1Mjg5LC0wLjkwMzk4IDEuNjM1MjkxLDAuOTAzOTggLTAuMzEyMzc0LC0xLjkxNDUzIHogbSAtMi42NDU4MzQsMS45MzY3NyAtMS4xNTQ3NDEsMC42MzgyOSAwLjIyMDU5NywtMS4zNTIwMyAtMC45MzQzMTEsLTAuOTU3NTIgMS4yOTExNjgsLTAuMTk3MTkgMC41Nzc0NTMsLTEuMjMwMTQgMC41Nzc0NTIsMS4yMzAxNCAxLjI5MTAwMiwwLjE5NzE5IC0wLjkzNDMwOSwwLjk1NzUyIDAuMjIwNTk2LDEuMzUyMDMgLTEuMTU0NzQxLC0wLjYzODI5IHoiCiAgICAgICBpZD0icGF0aDM3MDItMCIgLz4KICA8L2c+Cjwvc3ZnPg==');
	background-repeat: no-repeat;
	background-size: cover;

	position: absolute;
	z-index: 1;
	width: 100%;
	height: 100%;
	list-style: none;
}

.rating-new > ul > li:first-child {
	background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgaWQ9InN2ZzgiCiAgIHZlcnNpb249IjEuMSIKICAgdmlld0JveD0iMCAwIDUyLjkxNjY2NSA1LjI5MTY2NjgiCiAgIGhlaWdodD0iMjAiCiAgIHdpZHRoPSIyMDAiPgogIDxkZWZzCiAgICAgaWQ9ImRlZnMyIiAvPgogIDxtZXRhZGF0YQogICAgIGlkPSJtZXRhZGF0YTUiPgogICAgPHJkZjpSREY+CiAgICAgIDxjYzpXb3JrCiAgICAgICAgIHJkZjphYm91dD0iIj4KICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4KICAgICAgICA8ZGM6dHlwZQogICAgICAgICAgIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiIC8+CiAgICAgICAgPGRjOnRpdGxlPjwvZGM6dGl0bGU+CiAgICAgIDwvY2M6V29yaz4KICAgIDwvcmRmOlJERj4KICA8L21ldGFkYXRhPgogIDxnCiAgICAgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCwtMjkxLjcwODMyKSIKICAgICBpZD0ibGF5ZXIxIj4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0ic3Ryb2tlLXdpZHRoOjAuMTY3NDMyNjg7ZmlsbDojMDA2MmI1O2ZpbGwtb3BhY2l0eToxIgogICAgICAgZD0iTSA1LjE1OTM3NSwyOTMuNzI5NiAzLjM3NjgxMDksMjkzLjQ1MDE4IDIuNTc5Njg3NSwyOTEuNzA4MzIgMS43ODI1NjQsMjkzLjQ1MDE4IDAsMjkzLjcyOTYgbCAxLjI4OTg0MzgsMS4zNTU4NiAtMC4zMDQ1NjQ0MywxLjkxNDUzIDEuNTk0NDA4MTMsLTAuOTAzOTcgMS41OTQ0MDgxLDAuOTAzOTcgLTAuMzA0NTY0MywtMS45MTQ1MyB6IgogICAgICAgaWQ9InBhdGgxMiIgLz4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0iZmlsbDojMDA2MmI1O2ZpbGwtb3BhY2l0eToxO3N0cm9rZS13aWR0aDowLjE2NzQzMjY4IgogICAgICAgZD0ibSAxMC40NTEwNDEsMjkzLjcyOTYgLTEuNzgyNTYzOCwtMC4yNzk0MiAtMC43OTcxMjMsLTEuNzQxODYgLTAuNzk3MTIzNiwxLjc0MTg2IC0xLjc4MjU2NCwwLjI3OTQyIDEuMjg5ODQzOCwxLjM1NTg2IC0wLjMwNDU2NDQsMS45MTQ1MyAxLjU5NDQwODIsLTAuOTAzOTcgMS41OTQ0MDgsMC45MDM5NyAtMC4zMDQ1NjQsLTEuOTE0NTMgeiIKICAgICAgIGlkPSJwYXRoMTItOCIgLz4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0iZmlsbDojMDA2MmI1O2ZpbGwtb3BhY2l0eToxO3N0cm9rZS13aWR0aDowLjE2NzQzMjY4IgogICAgICAgZD0ibSAxNS43NDI3MDgsMjkzLjcyOTYgLTEuNzgyNTY1LC0wLjI3OTQyIC0wLjc5NzEyMywtMS43NDE4NiAtMC43OTcxMjMsMS43NDE4NiAtMS43ODI1NjQsMC4yNzk0MiAxLjI4OTg0MywxLjM1NTg2IC0wLjMwNDU2NCwxLjkxNDUzIDEuNTk0NDA4LC0wLjkwMzk3IDEuNTk0NDA4LDAuOTAzOTcgLTAuMzA0NTY0LC0xLjkxNDUzIHoiCiAgICAgICBpZD0icGF0aDEyLTQiIC8+CiAgICA8cGF0aAogICAgICAgc3R5bGU9ImZpbGw6IzAwNjJiNTtmaWxsLW9wYWNpdHk6MTtzdHJva2Utd2lkdGg6MC4xNjc0MzI2OCIKICAgICAgIGQ9Im0gMjEuMDM0Mzc1LDI5My43Mjk2IC0xLjc4MjU2NSwtMC4yNzk0MiAtMC43OTcxMjMsLTEuNzQxODYgLTAuNzk3MTIzLDEuNzQxODYgLTEuNzgyNTY0LDAuMjc5NDIgMS4yODk4NDMsMS4zNTU4NiAtMC4zMDQ1NjQsMS45MTQ1MyAxLjU5NDQwOCwtMC45MDM5NyAxLjU5NDQwOCwwLjkwMzk3IC0wLjMwNDU2NCwtMS45MTQ1MyB6IgogICAgICAgaWQ9InBhdGgxMi0wIiAvPgogICAgPHBhdGgKICAgICAgIHN0eWxlPSJmaWxsOiMwMDYyYjU7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlLXdpZHRoOjAuMTY3NDMyNjgiCiAgICAgICBkPSJtIDI2LjMyNjA0MiwyOTMuNzI5NiAtMS43ODI1NjQsLTAuMjc5NDIgLTAuNzk3MTIzLC0xLjc0MTg2IC0wLjc5NzEyNCwxLjc0MTg2IC0xLjc4MjU2NCwwLjI3OTQyIDEuMjg5ODQ0LDEuMzU1ODYgLTAuMzA0NTY1LDEuOTE0NTMgMS41OTQ0MDksLTAuOTAzOTcgMS41OTQ0MDgsMC45MDM5NyAtMC4zMDQ1NjUsLTEuOTE0NTMgeiIKICAgICAgIGlkPSJwYXRoMTItNiIgLz4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0iZmlsbDojMDA2MmI1O2ZpbGwtb3BhY2l0eToxO3N0cm9rZS13aWR0aDowLjE2NzQzMjY4IgogICAgICAgZD0ibSAzMS42MTc3MDgsMjkzLjcyOTYgLTEuNzgyNTY0LC0wLjI3OTQyIC0wLjc5NzEyMywtMS43NDE4NiAtMC43OTcxMjQsMS43NDE4NiAtMS43ODI1NjQsMC4yNzk0MiAxLjI4OTg0NCwxLjM1NTg2IC0wLjMwNDU2NCwxLjkxNDUzIDEuNTk0NDA4LC0wLjkwMzk3IDEuNTk0NDA4LDAuOTAzOTcgLTAuMzA0NTY1LC0xLjkxNDUzIHoiCiAgICAgICBpZD0icGF0aDEyLTciIC8+CiAgICA8cGF0aAogICAgICAgc3R5bGU9ImZpbGw6IzAwNjJiNTtmaWxsLW9wYWNpdHk6MTtzdHJva2Utd2lkdGg6MC4xNjc0MzI2OCIKICAgICAgIGQ9Im0gMzYuOTA5Mzc1LDI5My43Mjk2IC0xLjc4MjU2NSwtMC4yNzk0MiAtMC43OTcxMjMsLTEuNzQxODYgLTAuNzk3MTIzLDEuNzQxODYgLTEuNzgyNTY0LDAuMjc5NDIgMS4yODk4NDMsMS4zNTU4NiAtMC4zMDQ1NjQsMS45MTQ1MyAxLjU5NDQwOCwtMC45MDM5NyAxLjU5NDQwOCwwLjkwMzk3IC0wLjMwNDU2NCwtMS45MTQ1MyB6IgogICAgICAgaWQ9InBhdGgxMi01IiAvPgogICAgPHBhdGgKICAgICAgIHN0eWxlPSJmaWxsOiMwMDYyYjU7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlLXdpZHRoOjAuMTY3NDMyNjgiCiAgICAgICBkPSJtIDQyLjIwMTA0MiwyOTMuNzI5NiAtMS43ODI1NjQsLTAuMjc5NDIgLTAuNzk3MTIzLC0xLjc0MTg2IC0wLjc5NzEyNCwxLjc0MTg2IC0xLjc4MjU2NCwwLjI3OTQyIDEuMjg5ODQ0LDEuMzU1ODYgLTAuMzA0NTY0LDEuOTE0NTMgMS41OTQ0MDgsLTAuOTAzOTcgMS41OTQ0MDgsMC45MDM5NyAtMC4zMDQ1NjQsLTEuOTE0NTMgeiIKICAgICAgIGlkPSJwYXRoMTItNjIiIC8+CiAgICA8cGF0aAogICAgICAgc3R5bGU9ImZpbGw6IzAwNjJiNTtmaWxsLW9wYWNpdHk6MTtzdHJva2Utd2lkdGg6MC4xNjc0MzI2OCIKICAgICAgIGQ9Im0gNDcuNDkyNzA4LDI5My43Mjk2IC0xLjc4MjU2NCwtMC4yNzk0MiAtMC43OTcxMjQsLTEuNzQxODYgLTAuNzk3MTIzLDEuNzQxODYgLTEuNzgyNTY0LDAuMjc5NDIgMS4yODk4NDQsMS4zNTU4NiAtMC4zMDQ1NjUsMS45MTQ1MyAxLjU5NDQwOCwtMC45MDM5NyAxLjU5NDQwOSwwLjkwMzk3IC0wLjMwNDU2NSwtMS45MTQ1MyB6IgogICAgICAgaWQ9InBhdGgxMi00NiIgLz4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0iZmlsbDojMDA2MmI1O2ZpbGwtb3BhY2l0eToxO3N0cm9rZS13aWR0aDowLjE2OTU2NTY2IgogICAgICAgZD0ibSA1Mi45MTY2NjcsMjkzLjcyOTYgLTEuODI4MjcyLC0wLjI3OTQyIC0wLjgxNzU2MiwtMS43NDE4NiAtMC44MTc1NjIsMS43NDE4NiAtMS44MjgyNzEsMC4yNzk0MiAxLjMyMjkxNiwxLjM1NTg2IC0wLjMxMjM3MywxLjkxNDUzIDEuNjM1MjksLTAuOTAzOTcgMS42MzUyOSwwLjkwMzk3IC0wLjMxMjM3MywtMS45MTQ1MyB6IgogICAgICAgaWQ9InBhdGgxMi02NyIgLz4KICA8L2c+Cjwvc3ZnPg==');
	background-repeat: no-repeat;
	background-size: cover;

	position: absolute;
	z-index: 2;
	height: 100%;
}

.star-item {
	float: right;
  display: block;
	width: 10%;
	height: 100%;
}

.star-item > span {
	display: block;
	width: 10%;
	height: 100%;
  position: absolute;
  z-index: 20;
  cursor: pointer;
}

.star-item > span:hover {
	background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgaWQ9InN2ZzgiCiAgIHZlcnNpb249IjEuMSIKICAgdmlld0JveD0iMCAwIDUyLjkxNjY2NSA1LjI5MTY2NjgiCiAgIGhlaWdodD0iMjAiCiAgIHdpZHRoPSIyMDAiPgogIDxkZWZzCiAgICAgaWQ9ImRlZnMyIiAvPgogIDxtZXRhZGF0YQogICAgIGlkPSJtZXRhZGF0YTUiPgogICAgPHJkZjpSREY+CiAgICAgIDxjYzpXb3JrCiAgICAgICAgIHJkZjphYm91dD0iIj4KICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4KICAgICAgICA8ZGM6dHlwZQogICAgICAgICAgIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiIC8+CiAgICAgICAgPGRjOnRpdGxlPjwvZGM6dGl0bGU+CiAgICAgIDwvY2M6V29yaz4KICAgIDwvcmRmOlJERj4KICA8L21ldGFkYXRhPgogIDxnCiAgICAgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCwtMjkxLjcwODMyKSIKICAgICBpZD0ibGF5ZXIxIj4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0ic3Ryb2tlLXdpZHRoOjAuMTY3NDMyNjg7ZmlsbDojZmYwMDAwO2ZpbGwtb3BhY2l0eToxIgogICAgICAgZD0iTSA1LjE1OTM3NSwyOTMuNzI5NiAzLjM3NjgxMDksMjkzLjQ1MDE4IDIuNTc5Njg3NSwyOTEuNzA4MzIgMS43ODI1NjQsMjkzLjQ1MDE4IDAsMjkzLjcyOTYgbCAxLjI4OTg0MzgsMS4zNTU4NiAtMC4zMDQ1NjQ0MywxLjkxNDUzIDEuNTk0NDA4MTMsLTAuOTAzOTcgMS41OTQ0MDgxLDAuOTAzOTcgLTAuMzA0NTY0MywtMS45MTQ1MyB6IgogICAgICAgaWQ9InBhdGgxMiIgLz4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0iZmlsbDojZmYwMDAwO2ZpbGwtb3BhY2l0eToxO3N0cm9rZS13aWR0aDowLjE2NzQzMjY4IgogICAgICAgZD0ibSAxMC40NTEwNDEsMjkzLjcyOTYgLTEuNzgyNTYzOCwtMC4yNzk0MiAtMC43OTcxMjMsLTEuNzQxODYgLTAuNzk3MTIzNiwxLjc0MTg2IC0xLjc4MjU2NCwwLjI3OTQyIDEuMjg5ODQzOCwxLjM1NTg2IC0wLjMwNDU2NDQsMS45MTQ1MyAxLjU5NDQwODIsLTAuOTAzOTcgMS41OTQ0MDgsMC45MDM5NyAtMC4zMDQ1NjQsLTEuOTE0NTMgeiIKICAgICAgIGlkPSJwYXRoMTItOCIgLz4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0iZmlsbDojZmYwMDAwO2ZpbGwtb3BhY2l0eToxO3N0cm9rZS13aWR0aDowLjE2NzQzMjY4IgogICAgICAgZD0ibSAxNS43NDI3MDgsMjkzLjcyOTYgLTEuNzgyNTY1LC0wLjI3OTQyIC0wLjc5NzEyMywtMS43NDE4NiAtMC43OTcxMjMsMS43NDE4NiAtMS43ODI1NjQsMC4yNzk0MiAxLjI4OTg0MywxLjM1NTg2IC0wLjMwNDU2NCwxLjkxNDUzIDEuNTk0NDA4LC0wLjkwMzk3IDEuNTk0NDA4LDAuOTAzOTcgLTAuMzA0NTY0LC0xLjkxNDUzIHoiCiAgICAgICBpZD0icGF0aDEyLTQiIC8+CiAgICA8cGF0aAogICAgICAgc3R5bGU9ImZpbGw6I2ZmMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2Utd2lkdGg6MC4xNjc0MzI2OCIKICAgICAgIGQ9Im0gMjEuMDM0Mzc1LDI5My43Mjk2IC0xLjc4MjU2NSwtMC4yNzk0MiAtMC43OTcxMjMsLTEuNzQxODYgLTAuNzk3MTIzLDEuNzQxODYgLTEuNzgyNTY0LDAuMjc5NDIgMS4yODk4NDMsMS4zNTU4NiAtMC4zMDQ1NjQsMS45MTQ1MyAxLjU5NDQwOCwtMC45MDM5NyAxLjU5NDQwOCwwLjkwMzk3IC0wLjMwNDU2NCwtMS45MTQ1MyB6IgogICAgICAgaWQ9InBhdGgxMi0wIiAvPgogICAgPHBhdGgKICAgICAgIHN0eWxlPSJmaWxsOiNmZjAwMDA7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlLXdpZHRoOjAuMTY3NDMyNjgiCiAgICAgICBkPSJtIDI2LjMyNjA0MiwyOTMuNzI5NiAtMS43ODI1NjQsLTAuMjc5NDIgLTAuNzk3MTIzLC0xLjc0MTg2IC0wLjc5NzEyNCwxLjc0MTg2IC0xLjc4MjU2NCwwLjI3OTQyIDEuMjg5ODQ0LDEuMzU1ODYgLTAuMzA0NTY1LDEuOTE0NTMgMS41OTQ0MDksLTAuOTAzOTcgMS41OTQ0MDgsMC45MDM5NyAtMC4zMDQ1NjUsLTEuOTE0NTMgeiIKICAgICAgIGlkPSJwYXRoMTItNiIgLz4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0iZmlsbDojZmYwMDAwO2ZpbGwtb3BhY2l0eToxO3N0cm9rZS13aWR0aDowLjE2NzQzMjY4IgogICAgICAgZD0ibSAzMS42MTc3MDgsMjkzLjcyOTYgLTEuNzgyNTY0LC0wLjI3OTQyIC0wLjc5NzEyMywtMS43NDE4NiAtMC43OTcxMjQsMS43NDE4NiAtMS43ODI1NjQsMC4yNzk0MiAxLjI4OTg0NCwxLjM1NTg2IC0wLjMwNDU2NCwxLjkxNDUzIDEuNTk0NDA4LC0wLjkwMzk3IDEuNTk0NDA4LDAuOTAzOTcgLTAuMzA0NTY1LC0xLjkxNDUzIHoiCiAgICAgICBpZD0icGF0aDEyLTciIC8+CiAgICA8cGF0aAogICAgICAgc3R5bGU9ImZpbGw6I2ZmMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2Utd2lkdGg6MC4xNjc0MzI2OCIKICAgICAgIGQ9Im0gMzYuOTA5Mzc1LDI5My43Mjk2IC0xLjc4MjU2NSwtMC4yNzk0MiAtMC43OTcxMjMsLTEuNzQxODYgLTAuNzk3MTIzLDEuNzQxODYgLTEuNzgyNTY0LDAuMjc5NDIgMS4yODk4NDMsMS4zNTU4NiAtMC4zMDQ1NjQsMS45MTQ1MyAxLjU5NDQwOCwtMC45MDM5NyAxLjU5NDQwOCwwLjkwMzk3IC0wLjMwNDU2NCwtMS45MTQ1MyB6IgogICAgICAgaWQ9InBhdGgxMi01IiAvPgogICAgPHBhdGgKICAgICAgIHN0eWxlPSJmaWxsOiNmZjAwMDA7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlLXdpZHRoOjAuMTY3NDMyNjgiCiAgICAgICBkPSJtIDQyLjIwMTA0MiwyOTMuNzI5NiAtMS43ODI1NjQsLTAuMjc5NDIgLTAuNzk3MTIzLC0xLjc0MTg2IC0wLjc5NzEyNCwxLjc0MTg2IC0xLjc4MjU2NCwwLjI3OTQyIDEuMjg5ODQ0LDEuMzU1ODYgLTAuMzA0NTY0LDEuOTE0NTMgMS41OTQ0MDgsLTAuOTAzOTcgMS41OTQ0MDgsMC45MDM5NyAtMC4zMDQ1NjQsLTEuOTE0NTMgeiIKICAgICAgIGlkPSJwYXRoMTItNjIiIC8+CiAgICA8cGF0aAogICAgICAgc3R5bGU9ImZpbGw6I2ZmMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2Utd2lkdGg6MC4xNjc0MzI2OCIKICAgICAgIGQ9Im0gNDcuNDkyNzA4LDI5My43Mjk2IC0xLjc4MjU2NCwtMC4yNzk0MiAtMC43OTcxMjQsLTEuNzQxODYgLTAuNzk3MTIzLDEuNzQxODYgLTEuNzgyNTY0LDAuMjc5NDIgMS4yODk4NDQsMS4zNTU4NiAtMC4zMDQ1NjUsMS45MTQ1MyAxLjU5NDQwOCwtMC45MDM5NyAxLjU5NDQwOSwwLjkwMzk3IC0wLjMwNDU2NSwtMS45MTQ1MyB6IgogICAgICAgaWQ9InBhdGgxMi00NiIgLz4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0iZmlsbDojZmYwMDAwO2ZpbGwtb3BhY2l0eToxO3N0cm9rZS13aWR0aDowLjE2OTU2NTY2IgogICAgICAgZD0ibSA1Mi45MTY2NjcsMjkzLjcyOTYgLTEuODI4MjcyLC0wLjI3OTQyIC0wLjgxNzU2MiwtMS43NDE4NiAtMC44MTc1NjIsMS43NDE4NiAtMS44MjgyNzEsMC4yNzk0MiAxLjMyMjkxNiwxLjM1NTg2IC0wLjMxMjM3MywxLjkxNDUzIDEuNjM1MjksLTAuOTAzOTcgMS42MzUyOSwwLjkwMzk3IC0wLjMxMjM3MywtMS45MTQ1MyB6IgogICAgICAgaWQ9InBhdGgxMi02NyIgLz4KICA8L2c+Cjwvc3ZnPg==');
	background-repeat: no-repeat;
	background-size: cover;
}

.star-item:hover ~ .star-item > span {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgaWQ9InN2ZzgiCiAgIHZlcnNpb249IjEuMSIKICAgdmlld0JveD0iMCAwIDUyLjkxNjY2NSA1LjI5MTY2NjgiCiAgIGhlaWdodD0iMjAiCiAgIHdpZHRoPSIyMDAiPgogIDxkZWZzCiAgICAgaWQ9ImRlZnMyIiAvPgogIDxtZXRhZGF0YQogICAgIGlkPSJtZXRhZGF0YTUiPgogICAgPHJkZjpSREY+CiAgICAgIDxjYzpXb3JrCiAgICAgICAgIHJkZjphYm91dD0iIj4KICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4KICAgICAgICA8ZGM6dHlwZQogICAgICAgICAgIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiIC8+CiAgICAgICAgPGRjOnRpdGxlPjwvZGM6dGl0bGU+CiAgICAgIDwvY2M6V29yaz4KICAgIDwvcmRmOlJERj4KICA8L21ldGFkYXRhPgogIDxnCiAgICAgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCwtMjkxLjcwODMyKSIKICAgICBpZD0ibGF5ZXIxIj4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0ic3Ryb2tlLXdpZHRoOjAuMTY3NDMyNjg7ZmlsbDojZmYwMDAwO2ZpbGwtb3BhY2l0eToxIgogICAgICAgZD0iTSA1LjE1OTM3NSwyOTMuNzI5NiAzLjM3NjgxMDksMjkzLjQ1MDE4IDIuNTc5Njg3NSwyOTEuNzA4MzIgMS43ODI1NjQsMjkzLjQ1MDE4IDAsMjkzLjcyOTYgbCAxLjI4OTg0MzgsMS4zNTU4NiAtMC4zMDQ1NjQ0MywxLjkxNDUzIDEuNTk0NDA4MTMsLTAuOTAzOTcgMS41OTQ0MDgxLDAuOTAzOTcgLTAuMzA0NTY0MywtMS45MTQ1MyB6IgogICAgICAgaWQ9InBhdGgxMiIgLz4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0iZmlsbDojZmYwMDAwO2ZpbGwtb3BhY2l0eToxO3N0cm9rZS13aWR0aDowLjE2NzQzMjY4IgogICAgICAgZD0ibSAxMC40NTEwNDEsMjkzLjcyOTYgLTEuNzgyNTYzOCwtMC4yNzk0MiAtMC43OTcxMjMsLTEuNzQxODYgLTAuNzk3MTIzNiwxLjc0MTg2IC0xLjc4MjU2NCwwLjI3OTQyIDEuMjg5ODQzOCwxLjM1NTg2IC0wLjMwNDU2NDQsMS45MTQ1MyAxLjU5NDQwODIsLTAuOTAzOTcgMS41OTQ0MDgsMC45MDM5NyAtMC4zMDQ1NjQsLTEuOTE0NTMgeiIKICAgICAgIGlkPSJwYXRoMTItOCIgLz4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0iZmlsbDojZmYwMDAwO2ZpbGwtb3BhY2l0eToxO3N0cm9rZS13aWR0aDowLjE2NzQzMjY4IgogICAgICAgZD0ibSAxNS43NDI3MDgsMjkzLjcyOTYgLTEuNzgyNTY1LC0wLjI3OTQyIC0wLjc5NzEyMywtMS43NDE4NiAtMC43OTcxMjMsMS43NDE4NiAtMS43ODI1NjQsMC4yNzk0MiAxLjI4OTg0MywxLjM1NTg2IC0wLjMwNDU2NCwxLjkxNDUzIDEuNTk0NDA4LC0wLjkwMzk3IDEuNTk0NDA4LDAuOTAzOTcgLTAuMzA0NTY0LC0xLjkxNDUzIHoiCiAgICAgICBpZD0icGF0aDEyLTQiIC8+CiAgICA8cGF0aAogICAgICAgc3R5bGU9ImZpbGw6I2ZmMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2Utd2lkdGg6MC4xNjc0MzI2OCIKICAgICAgIGQ9Im0gMjEuMDM0Mzc1LDI5My43Mjk2IC0xLjc4MjU2NSwtMC4yNzk0MiAtMC43OTcxMjMsLTEuNzQxODYgLTAuNzk3MTIzLDEuNzQxODYgLTEuNzgyNTY0LDAuMjc5NDIgMS4yODk4NDMsMS4zNTU4NiAtMC4zMDQ1NjQsMS45MTQ1MyAxLjU5NDQwOCwtMC45MDM5NyAxLjU5NDQwOCwwLjkwMzk3IC0wLjMwNDU2NCwtMS45MTQ1MyB6IgogICAgICAgaWQ9InBhdGgxMi0wIiAvPgogICAgPHBhdGgKICAgICAgIHN0eWxlPSJmaWxsOiNmZjAwMDA7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlLXdpZHRoOjAuMTY3NDMyNjgiCiAgICAgICBkPSJtIDI2LjMyNjA0MiwyOTMuNzI5NiAtMS43ODI1NjQsLTAuMjc5NDIgLTAuNzk3MTIzLC0xLjc0MTg2IC0wLjc5NzEyNCwxLjc0MTg2IC0xLjc4MjU2NCwwLjI3OTQyIDEuMjg5ODQ0LDEuMzU1ODYgLTAuMzA0NTY1LDEuOTE0NTMgMS41OTQ0MDksLTAuOTAzOTcgMS41OTQ0MDgsMC45MDM5NyAtMC4zMDQ1NjUsLTEuOTE0NTMgeiIKICAgICAgIGlkPSJwYXRoMTItNiIgLz4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0iZmlsbDojZmYwMDAwO2ZpbGwtb3BhY2l0eToxO3N0cm9rZS13aWR0aDowLjE2NzQzMjY4IgogICAgICAgZD0ibSAzMS42MTc3MDgsMjkzLjcyOTYgLTEuNzgyNTY0LC0wLjI3OTQyIC0wLjc5NzEyMywtMS43NDE4NiAtMC43OTcxMjQsMS43NDE4NiAtMS43ODI1NjQsMC4yNzk0MiAxLjI4OTg0NCwxLjM1NTg2IC0wLjMwNDU2NCwxLjkxNDUzIDEuNTk0NDA4LC0wLjkwMzk3IDEuNTk0NDA4LDAuOTAzOTcgLTAuMzA0NTY1LC0xLjkxNDUzIHoiCiAgICAgICBpZD0icGF0aDEyLTciIC8+CiAgICA8cGF0aAogICAgICAgc3R5bGU9ImZpbGw6I2ZmMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2Utd2lkdGg6MC4xNjc0MzI2OCIKICAgICAgIGQ9Im0gMzYuOTA5Mzc1LDI5My43Mjk2IC0xLjc4MjU2NSwtMC4yNzk0MiAtMC43OTcxMjMsLTEuNzQxODYgLTAuNzk3MTIzLDEuNzQxODYgLTEuNzgyNTY0LDAuMjc5NDIgMS4yODk4NDMsMS4zNTU4NiAtMC4zMDQ1NjQsMS45MTQ1MyAxLjU5NDQwOCwtMC45MDM5NyAxLjU5NDQwOCwwLjkwMzk3IC0wLjMwNDU2NCwtMS45MTQ1MyB6IgogICAgICAgaWQ9InBhdGgxMi01IiAvPgogICAgPHBhdGgKICAgICAgIHN0eWxlPSJmaWxsOiNmZjAwMDA7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlLXdpZHRoOjAuMTY3NDMyNjgiCiAgICAgICBkPSJtIDQyLjIwMTA0MiwyOTMuNzI5NiAtMS43ODI1NjQsLTAuMjc5NDIgLTAuNzk3MTIzLC0xLjc0MTg2IC0wLjc5NzEyNCwxLjc0MTg2IC0xLjc4MjU2NCwwLjI3OTQyIDEuMjg5ODQ0LDEuMzU1ODYgLTAuMzA0NTY0LDEuOTE0NTMgMS41OTQ0MDgsLTAuOTAzOTcgMS41OTQ0MDgsMC45MDM5NyAtMC4zMDQ1NjQsLTEuOTE0NTMgeiIKICAgICAgIGlkPSJwYXRoMTItNjIiIC8+CiAgICA8cGF0aAogICAgICAgc3R5bGU9ImZpbGw6I2ZmMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2Utd2lkdGg6MC4xNjc0MzI2OCIKICAgICAgIGQ9Im0gNDcuNDkyNzA4LDI5My43Mjk2IC0xLjc4MjU2NCwtMC4yNzk0MiAtMC43OTcxMjQsLTEuNzQxODYgLTAuNzk3MTIzLDEuNzQxODYgLTEuNzgyNTY0LDAuMjc5NDIgMS4yODk4NDQsMS4zNTU4NiAtMC4zMDQ1NjUsMS45MTQ1MyAxLjU5NDQwOCwtMC45MDM5NyAxLjU5NDQwOSwwLjkwMzk3IC0wLjMwNDU2NSwtMS45MTQ1MyB6IgogICAgICAgaWQ9InBhdGgxMi00NiIgLz4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0iZmlsbDojZmYwMDAwO2ZpbGwtb3BhY2l0eToxO3N0cm9rZS13aWR0aDowLjE2OTU2NTY2IgogICAgICAgZD0ibSA1Mi45MTY2NjcsMjkzLjcyOTYgLTEuODI4MjcyLC0wLjI3OTQyIC0wLjgxNzU2MiwtMS43NDE4NiAtMC44MTc1NjIsMS43NDE4NiAtMS44MjgyNzEsMC4yNzk0MiAxLjMyMjkxNiwxLjM1NTg2IC0wLjMxMjM3MywxLjkxNDUzIDEuNjM1MjksLTAuOTAzOTcgMS42MzUyOSwwLjkwMzk3IC0wLjMxMjM3MywtMS45MTQ1MyB6IgogICAgICAgaWQ9InBhdGgxMi02NyIgLz4KICA8L2c+Cjwvc3ZnPg==');
	background-repeat: no-repeat;
	background-size: cover
}


	
		
		
		
		
		
		
		
		
		
		
		
	






Еще раз спасибо)))

суббота, 15 февраля 2020 г.

Как сделать закрашивание SVG иконки на hover?

#html #css #svg #hover #png


Есть две иконки: 1-ая (иконка сверху) стоит обычная, но при ховере она должна закрашиваться
(иконка снизу). Как такое реализовать, да еще и плавно, желательно?

P.S. Вариант только создать две png иконки и подменять при ховер ?

Ответы

Ответ 1


Чтобы при ховере изменять цвет заливки, используйте свойство fill-opacity и, при
необходимости, stroke-opacity:



svg {
  display: block;
  width: 200px;
  height: 162px;
  margin: 40px auto;
}

path {
  fill-opacity: 0;
  fill: #f00;
  stroke: #f00;
  transition: all 0.4s linear;
}

svg:hover path {
  fill-opacity: 1;
  stroke-opacity: 0;
}



Ответ 2


Самый простой способ с двумя картинками друг над другом и изменением прозрачности
верхней:



div {
  width: 50px;
  height: 50px;
  background: url('https://i.stack.imgur.com/G1BtB.jpg') no-repeat -20px -14px;
  overflow: hidden;
}

.item:hover {
  opacity: 0;
  transition: all 500ms ease;
}

.item-wrapper {
  background-position: -20px -88px;
}

воскресенье, 12 января 2020 г.

hover работает неправильно

#html #css #hover


При наведении курсора на картинку она должна меняться на другую. А в реальности при
наведении курсора hover-картинка подкладывается снизу (я вижу ее контур). Почему так
происходит и как это исправить? За CSS, если что, не ругайте, я пока учусь. Как раз
на этом сайте.



.soc_net {	
  -webkit-padding-start: 0;
  margin: 30px 0 0 0;
}
.soc_net a {
  display: block;
}
.soc_net li{
  display: inline-block;
  margin: 0 1px;
}
.soc_net span{
  display: none;
}
.soc_net .vk:before {
  cursor: pointer;
  background-image: url(vk.png);
}
.soc_net .insta:before {
  background-image: url(insta.png);
}
.soc_net .fb:before {
  background-image: url(fb.png);
}
.soc_net .ytube:before {
  background-image: url(ytube.png);
} 
.soc_net .vk:hover {
  background-image: url(ytube.png);
}
.soc_net .insta:hover {
  background-image: url(ytube.png);
}
.soc_net .fb:hover {
  background-image: url(ytube.png);
}
.soc_net .ytube:hover {
  background-image: url(fb.png);
} 
.soc_net a:before {
  content:'';
  display:block;
  width:48px;
  height:48px;
}

  vk
  inst
  facebook
  YouTube

Ответы

Ответ 1


Чтобы добавить стиль для hover псевдоэлементу :before, нужно писать так в сss class:hover:before,
и тогда всё работает:



.soc_net {
  -webkit-padding-start: 0;
  margin: 30px 0 0 0;
}
.soc_net a {
  display: block;
}
.soc_net li {
  display: inline-block;
  margin: 0 1px;
}
.soc_net span {
  display: none;
}
.soc_net .vk:before {
  cursor: pointer;
  background-image: url(http://mighty.su/images/149_vk.png);
}
.soc_net .ytube:before {
  background-image: url(http://quest-city.com/wp-content/uploads/2016/04/YouTube.png);
}
.soc_net .vk:hover:before {
  background-size: 100% 100%;
  background-image: url(http://quest-city.com/wp-content/uploads/2016/04/YouTube.png);
}
.soc_net .ytube:hover:before {
  background-image: url(http://mighty.su/images/149_vk.png);
}
.soc_net a:before {
  content: '';
  display: block;
  background-size: 100% 100%;
  width: 48px;
  height: 48px;
  transition: all 0.3s ease;
}

  vk
  
  YouTube

пятница, 10 января 2020 г.

Как пофиксить проблему с hover в меню

#javascript #html #jquery #hover


Когда навожу курсор на элемент меню, появляется выпадающее меню. Когда пытаюсь навести
на него, оно пропадает. Как пофиксить?

Ответы

Ответ 1


Для этого выпадающее меню должно быть вложено в пункт меню. Все можно реализовать
только на css. Пример:



li {cursor: pointer;}
li.submenu ul {display: none; margin: 0px; padding-left: 30px;}
li.submenu:hover ul {display: block;}
пункт меню 1
пункт меню 2
пункт меню со вложением
  
    подменю 1
    подменю 2
  

пункт меню 4

четверг, 9 января 2020 г.

Как изменить по событию hover , path в svg?

#svg #hover


Собственно сам вопрос в заголовке 









Имеется такой hexagon а svg и в соответствии с макетом на нём должен произойти hover
и по этому событию должно произойти увеличение тёмного элемента, я всё сделал за исключением
hover.

Как мне раньше объясняли что должно быть одинаковое ко-во точек и именно это условие
я предусмотрел ..

Как в этом случае сделать так что бы было как во втором hexagon ?

Ответы

Ответ 1


#pouring {
  transition: 1s;
}

#hexagon:hover #pouring {
 d: path("m 85.620408,182.81115 0.753717,-46.40922 46.976195,-22.64163 46.22247,23.76759
-0.75372,46.40922 -46.97619,22.64164 z");
 d: "m 85.620408,182.81115 0.753717,-46.40922 46.976195,-22.64163 46.22247,23.76759
-0.75372,46.40922 -46.97619,22.64164 z";
 transform: translate(-55px, -17px);
}

Hover-антипод, как сделать при отведении мыши обратный эффект медленным?

#css #css3 #hover


Хотел сделать чтобы при наведении менял цвет, а при отведении с такой же скоростью
обратно. Но получилось что обратно он возвращает цвет моментально, подскажите как сделать?



a {
  font-family: pf_square_sans_proregular;
  text-decoration: none;
  color: #000000;
  padding: 7.5px 10px 7.5px 8px;
  height: 30px;
  width: 222px;
  display: block;
}

a:hover,
li {
  background: #171B25;
  transition: all 2s ease;
}

a:hover .text {
  color: white;
  transition-duration: 0.5s;
}

  
  Играть

Ответы

Ответ 1


a {
  font-family: pf_square_sans_proregular;
  text-decoration: none;
  color: #000000;
  padding: 7.5px 10px 7.5px 8px;
  height: 30px;
  width: 222px;
  display: block;
  transition: all 2s ease;
}

a:hover,
li {
  background: #171B25;
}

a:hover .text {
  color: white;
  transition-duration: 0.5s;
}

  
  Играть





Transition перенести необходимо

понедельник, 6 января 2020 г.

Появление блока без сдвига нижних

#html #css #hover #position


Имеется следующая разметка:



.container {
  width: 200px;
}

.container .item {
  text-align: center;
  margin-bottom: 10px;
}

.container .item .title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.container .item .button {
  display: none;
}

.container .item:hover .title {
  white-space: normal;
}

.container .item:hover .button {
  display: block;
}

  
    Длинный длинный длинный заголовок товара
    12345.67 USD
    
      Купить
    
  

  
    Длинный длинный длинный заголовок товара
    12345.67 USD
    
      Купить
    
  

  
    Длинный длинный длинный заголовок товара
    12345.67 USD
    
      Купить
    
  





https://jsfiddle.net/5cfwb5bu/

Задача: сделать так, чтобы по ховеру на .item отображался полный заголовок и кнопка,
но при этом нижестоящие блоки .item не должны сдвигаться вниз. 

Знаю про position: absolute, но не пойму как правильно применить.

Ответы

Ответ 1


Можно сделать так: т.к. кол-во изначально видимого контента известно, можно задать
блокам фиксированную высоту, а все его содержимое поместить в еще один контейнер -
таким образом по ховеру "новый" контент не будет двигать нижестоящие блоки. И никаких
position:absolute не нужно.



.container {
  width: 200px;
}

.container .item {
  text-align: center;
  margin-bottom: 10px;
  position: relative;
  height: 2em;
}

.container .item .hover {
  background: #fff;
}

.container .item .title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

.container .item .button {
  display: none;
}

.container .item:hover {
  z-index: 1;
}

.container .item:hover .hover {
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
}

.container .item:hover .title {
  white-space: normal;
}

.container .item:hover .button {
  display: block;
}

  
    
      Длинный длинный длинный заголовок товара
      12345.67 USD
      
        Купить
      
    
  
  
    
      Длинный длинный длинный заголовок товара
      12345.67 USD
      
        Купить
      
    
  
  
    
      Длинный длинный длинный заголовок товара
      12345.67 USD
      
        Купить
      
    
  



Ответ 2


Можно сделать абсолютное позиционирование для item при hover и сдвигать нижний блок
на нужную высоту прошлого блока.



.container {
  width: 200px;
  /* для абсолютное позиционирование относительно данного контейнера */
  position: relative;
}

.container .item {
  text-align: center;
  margin-bottom: 10px;
}

.container .item .title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.container .item:hover {
  /* абсолютное позиционирование */
  position: absolute;
  /* просто для демонстрации */
  background-color: red;
}

/* сдвигаем нижний блок на нужное расстояние */
.container .item:hover + .item {
  padding-top: 60px;
}

.container .item .button {
  display: none;
}

.container .item:hover .title {
  white-space: normal;
}

.container .item:hover .button {
  display: block;
}

  
    Длинный длинный длинный заголовок товара
    12345.67 USD
    
      Купить
    
  

  
    Длинный длинный длинный заголовок товара
    12345.67 USD
    
      Купить
    
  

  
    Длинный длинный длинный заголовок товара
    12345.67 USD
    
      Купить

пятница, 20 декабря 2019 г.

Вращение или поворот изображения при наведении

#html #css #css3 #анимация #hover


Я хочу узнать, как сделать вращающееся  изображение, когда на него наводится курсор.
Хотелось бы понять, как реализовать эту функциональность с помощью CSS и следующего
кода:    



img {
  border-radius: 50%;
}

Ответы

Ответ 1


Вы можете использовать transitions CSS3 для вращения изображения при наведении.    

Rotating image :



img {
  border-radius: 50%;
  -webkit-transition: -webkit-transform .8s ease-in-out;
          transition:         transform .8s ease-in-out;
}
img:hover {
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
}



 

Ещё пример:  

Вращение спирали  





img {
  border-radius: 50%;
  -webkit-transition: -webkit-transform .8s ease-in-out;
          transition:         transform .8s ease-in-out;
}
img:hover {
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
}





Дополнительная информация и ссылки:


Руководство по transitions CSS на MDN    
Руководство по transforms CSS на MDN   
Таблица поддержки браузера для 2d-transforms на caniuse.com
Таблица поддержки браузера для transitions на caniuse.com   


Перевод ответа: Spin or rotate an image on hover @web-tiki


Ответ 2


@keyframes _img {
  0% {
    -webkit-transform: rotateX(-360deg) translateZ(60px) rotateX(360deg);
    transform: rotateX(-360deg) translateZ(60px) rotateX(360deg);
  }
  25% {
    -webkit-transform: rotate(360deg);
    -webkit-filter: drop-shadow(0px 0px 20px hsla(240, 80%, 50%, 1));
    transform: rotate(360deg);
    filter: drop-shadow(0px 0px 20px hsla(240, 80%, 50%, 1));
  }
  50% {
    -webkit-transform: rotate(0deg);
    -webkit-filter: drop-shadow(0px 0px 20px hsla(240, 80%, 50%, 1));
    transform: rotate(0deg);
    filter: drop-shadow(0px 0px 20px hsla(240, 80%, 50%, 1));
  }
  100% {
    -webkit-transform: rotateX(0deg) translateZ(60px) rotateX(0deg);
    transform: rotateX(0deg) translateZ(60px) rotateX(0deg);
  }
}

div {
  border: 1px solid hsla(0, 0%, 100%, 1);
  display: block;
  position: relative;
  width: calc(20vw);
  height: calc(20vw);
  margin: 0% auto;
  background: hsla(0, 0%, 60%, 1);
  box-shadow: inset .75em .75em .75em hsla(0, 0%, 100%, 1), inset -.75em -.75em .75em
hsla(0, 0%, 100%, 1);
  perspective: 300px;
  transform-style: preserve-3d;
  transition: all 1s linear 0s;
}

img {
  border-radius: 50%;
  border: 1px solid hsla(0, 0%, 60%, 1);
  position: absolute;
  width: calc(8vw);
  height: calc(8vw);
  top: calc(100%/3 - 3%);
  left: calc(100%/3 - 4%);
  -webkit-filter: drop-shadow(0px 0px 40px hsla(70, 80%, 40%, 1));
  -webkit-transform: rotateX(0deg) translateZ(60px) rotateX(0deg);
  filter: drop-shadow(0px 0px 40px hsla(70, 80%, 40%, 1));
  transform: rotateX(0deg) translateZ(60px) rotateX(0deg);
}

div:hover img {
  animation: _img 3s 0s linear;
}

среда, 11 декабря 2019 г.

Убрать стрелочки с <input type=“number”>

#html #css #hover


Есть input с типом number и при наведении на него появляются такие стрелочки:






Можно ли как-то их убрать?

Ответы

Ответ 1


input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}





Ответ тут.


Ответ 2


Не наблюдаю стрелки в IE. Код ниже прячет стрелки управления в браузерах, основанных
на webkit (Opera для проверки нет):

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}


Для Firefox попроще:

input[type='number'] {
    -moz-appearance: textfield;
}


Ответ 3


Эти стрелки добавляют сам бреузер, но их можно убрать обычными стилями css.

Это для браузера Chrome:

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


Это для браузера Firefox:

input[type="number"] {
  -moz-appearance: textfield;
}
input[type="number"]:hover,
input[type="number"]:focus {
  -moz-appearance: number-input;
}


Для других

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


Ответ 4


Сделал специальный плагин под это numberPlugin всё расписано на русском как подключать,
применён уже не на одном реальном сайте есть на github
Плагин для стилизации  и на сайте http://number-plugin.ru

Для подключения плагина добавьте в 






Создайте элемент




И подключите скрипт

$(document).ready(function () {
  $('.numb').number_plugin();
});


Ответ 5


В англоязычном SO дан такой ответ - попробуйте добавить в .css такое:

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

понедельник, 25 ноября 2019 г.

Как сделать необычную рамку при наведении на элемент?


Как лучше реализовать такую рамку при наведении на элемент?

Ответы

Ответ 1


Для этого можно использовать псевдоэлементы :before и :after. Например, так:



html,
body {
  padding: 10px;
  margin: 0px;
  background: #1a244e;
}

.block {
  width: 176px;
  height: 246px;
  position: relative;
  z-index: 1;
  margin: 20px auto;
}

.block:before,
.block:after {
  content: '';
  position: absolute;
  display: block;
  width: 75px;
  height: 195px;
  border: green solid 2px;
  transition: all 0.4s ease-in-out;
  opacity: 0;
  visibility: hidden;
}

.block:before {
  right: -5px;
  top: -5px;
  border-left: none;
  border-bottom: none;
}

.block:after {
  left: -5px;
  bottom: -5px;
  border-right: none;
  border-top: none;
}

.block:hover:before,
.block:hover:after {
  opacity: 1;
  visibility: visible;
}

  







Можно немного поиграться со стилями и получить разные эффекты.

Вариант #1 с transform: translate():



html,
body {
  padding: 10px;
  margin: 0px;
  background: #1a244e;
}

.block {
  width: 176px;
  height: 246px;
  background: #000;
  position: relative;
  z-index: 1;
  cursor: pointer;
  margin: 20px auto;
}

.block:before,
.block:after {
  content: '';
  position: absolute;
  display: block;
  width: 75px;
  height: 195px;
  border: green solid 2px;
  transition: all 0.4s ease-in-out;
  opacity: 0;
  visibility: hidden;
}

.block:before {
  right: -5px;
  top: -5px;
  transform: translate(10px, -10px);
  border-left: none;
  border-bottom: none;
}

.block:after {
  left: -5px;
  bottom: -5px;
  transform: translate(-10px, 10px);
  border-right: none;
  border-top: none;
}

.block:hover:before,
.block:hover:after {
  opacity: 1;
  visibility: visible;
  transform: translate(0, 0);
}

  







Вариант #2 с transform: translate():



html,
body {
  padding: 10px;
  margin: 0px;
  background: #1a244e;
}

.block {
  width: 176px;
  height: 246px;
  background: #000;
  position: relative;
  z-index: 1;
  cursor: pointer;
  margin: 20px auto;
}

.block:before,
.block:after {
  content: '';
  position: absolute;
  display: block;
  width: 75px;
  height: 195px;
  border: green solid 2px;
  transition: all 0.4s ease-in-out;
  z-index: -1;
  opacity: 0;
  visibility: hidden;
}

.block:before {
  right: -5px;
  top: -5px;
  border-left: none;
  border-bottom: none;
  transform: translate(-10px, 10px);
}

.block:after {
  left: -5px;
  bottom: -5px;
  border-right: none;
  border-top: none;
  transform: translate(10px, -10px);
}

.block:hover:before,
.block:hover:after {
  opacity: 1;
  visibility: visible;
  transform: translate(0, 0);
}

  







Вариант #3 с width и height:



html,
body {
  padding: 10px;
  margin: 0px;
  background: #1a244e;
}

.block {
  width: 176px;
  height: 246px;
  background: #000;
  position: relative;
  z-index: 1;
  cursor: pointer;
  margin: 20px auto;
}

.block:before,
.block:after {
  content: '';
  position: absolute;
  display: block;
  width: 0px;
  height: 0px;
  border: green solid 2px;
  transition: all 0.4s ease-in-out;
  opacity: 0;
  visibility: hidden;
}

.block:before {
  right: -5px;
  top: -5px;
  border-left: none;
  border-bottom: none;
}

.block:after {
  left: -5px;
  bottom: -5px;
  border-right: none;
  border-top: none;
}

.block:hover:before,
.block:hover:after {
  width: 75px;
  height: 195px;
  opacity: 1;
  visibility: visible;
}

  







Вариант #4 на SVG:



html,
body {
  padding: 10px;
  margin: 0px;
  background: #1a244e;
}

.block {
  width: 176px;
  height: 246px;
  position: relative;
  z-index: 1;
  margin: 20px auto;
}

.border {
  width: 186px;
  height: 256px;
  display: block;
  position: absolute;
  left: -5px;
  bottom: -5px;
}

.border polyline {
  stroke: green;
  stroke-width: 2px;
  stroke-dasharray: 271;
  stroke-dashoffset: 271;
  transition: all 0.6s ease-in-out;
}

.block:hover .border polyline {
  stroke-dashoffset: 0;
  opacity: 1;
  visibility: visible;
}

  
  







UPDATE

Вариант #5 с вынесением рамки в отдельные блоки и использованием transform: translate():



html,
body {
  overflow: hidden;
  padding: 10px;
  margin: 0px;
  background: #1a244e;
}

.block {
  width: 176px;
  height: 246px;
  position: relative;
  z-index: 1;
  margin: 20px auto;
}

.border {
  position: absolute;
  left: -5px;
  top: -5px;
  right: -5px;
  bottom: -5px;
}

.border:before,
.border:after {
  content: '';
  position: absolute;
  display: block;
  background: green;
  transition: all 0.2s ease-in-out;
  opacity: 0;
  visibility: hidden;
}

.border:before {
  width: 75px;
  height: 2px;
}

.border:after {
  width: 2px;
  height: 195px;
}

.border.border-rt:before,
.border.border-rt:after {
  right: 0px;
  top: 0px;
}

.border.border-lb:before,
.border.border-lb:after {
  left: 0px;
  bottom: 0px;
}

.border.border-rt:before {
  transform: translate(100%, 0);
}

.border.border-rt:after {
  transform: translate(0, -100%);
}

.border.border-lb:before {
  transform: translate(-100%, 0);
}

.border.border-lb:after {
  transform: translate(0, 100%);
}

.block:hover .border:before,
.block:hover .border:after {
  opacity: 1;
  visibility: visible;
  transform: translate(0, 0);
}

  
  
  



Ответ 2


Пример анимации с помощью одновременного смешения четырёх линий вдоль границ изображения.  Ниже поясняющая схема достижения эффекта:     

   



body {
  background: #2c3e50;
}

.box {
  width: 176px;
  height: 246px;
  position: relative;
  background-image: url("http://i.imgur.com/15ofDrj.png");
  display: inline-block;
  cursor: pointer;
  opacity: 0.8;
}

.box:hover {
  opacity: 1;
  -webkit-transition: all .8s ease-in-out;
  transition: all .8s ease-in-out;
}

.box svg {
  position: absolute;
  top: 0;
  left: 0;
}

.box svg line {
  stroke-width: 4;
  stroke: skyblue;
  fill: none;
  -webkit-transition: all .8s ease-in-out;
  transition: all .8s ease-in-out;
}

.box:hover svg line {
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}

.box svg line.top,
.box svg line.bottom {
  stroke-dasharray: 176 176;
}

.box svg line.left,
.box svg line.right {
  stroke-dasharray: 246 246;
}

.box:hover svg line.top {
  -webkit-transform: translateX(-352px);
  transform: translateX(-352px);
}

.box:hover svg line.bottom {
  -webkit-transform: translateX(352px);
  transform: translateX(352px);
}

.box:hover svg line.left {
  -webkit-transform: translateY(492px);
  transform: translateY(492px);
}

.box:hover svg line.right {
  -webkit-transform: translateY(-492px);
  transform: translateY(-492px);
}

  





Более подробно о реализации данного эффекта здесь

Страницы

Поиск по вопросам

воскресенье, 29 марта 2020 г.

Ответы

Ответ 1

среда, 4 марта 2020 г.

Ответы

Ответ 1

Ответ 2

суббота, 22 февраля 2020 г.

Ответы

Ответ 1

Ответ 2

пятница, 21 февраля 2020 г.

Ответы

Ответ 1

Ответ 2

воскресенье, 16 февраля 2020 г.

Ответы

Ответ 1

Ответ 2

Ответы

Ответ 1

Ответ 2

суббота, 15 февраля 2020 г.

Ответы

Ответ 1

Ответ 2

воскресенье, 12 января 2020 г.

Ответы

Ответ 1

пятница, 10 января 2020 г.

Ответы

Ответ 1

четверг, 9 января 2020 г.

Ответы

Ответ 1

Ответы

Ответ 1

понедельник, 6 января 2020 г.

Ответы

Ответ 1

Ответ 2

пятница, 20 декабря 2019 г.

Ответы

Ответ 1

Ответ 2

среда, 11 декабря 2019 г.

Ответы

Ответ 1

Ответ 2

Ответ 3

Ответ 4

Ответ 5

понедельник, 25 ноября 2019 г.

Ответы

Ответ 1

Ответ 2

воскресенье, 29 марта 2020 г.

среда, 4 марта 2020 г.

суббота, 22 февраля 2020 г.

пятница, 21 февраля 2020 г.

воскресенье, 16 февраля 2020 г.

суббота, 15 февраля 2020 г.

воскресенье, 12 января 2020 г.

пятница, 10 января 2020 г.

четверг, 9 января 2020 г.

понедельник, 6 января 2020 г.

пятница, 20 декабря 2019 г.

среда, 11 декабря 2019 г.

понедельник, 25 ноября 2019 г.