У меня две проблемы. Во-первых, при наведении курсора на одну вещь (https://prnt.sc/s9etq3 (мышь не видна из-за скриншота, но она находится на объекте)), я получаю только контур, а не полный фон. Во-вторых, я слишком глуп, чтобы правильно масштабировать окно поиска. Я хочу, чтобы это было на 10% от сторон (слева и справа). Код для зависания находится внутри div.gallery:hover
@import url('https://fonts.googleapis.com/css?family=Roboto');
*{
margin: 0;
background: #222;
padding: 0;
font-family: 'Roboto', sans-serif;
}
.search_box{
position: relative;
left: 0%;
}
.search_box input[type="text"]{
width: 100%;
padding: 20px;
padding-right: 60px;
box-sizing: border-box;
background: rgba(0,0,0,0.3);
border: 2px solid #fff;
border-radius: 10px;
font-size: 18px;
color: #fff;
outline: none;
}
.fa-search{
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 25px;
color: #fff;
font-size: 25px;
}
::-webkit-input-placeholder {
color: #fff;
}
::-moz-placeholder {
color: #fff;
}
:-ms-input-placeholder {
color: #fff;
}
@media screen and (max-width: 425px){
.search_box{
width: 95%;
}
}
div.gallery {
margin: 5px;
border: 1px solid #222;
float: left;
width: 180px;
}
div.gallery:hover {
border: 1px solid #404040;
background: #404040;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
.container
{
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
.container div
{
margin: 10px;
}
.container div label
{
cursor: pointer;
}
.container div label input[type="checkbox"]
{
display: none;
}
.container div label span
{
position: relative;
display: inline-block;
background: #424242;
padding: 15px 30px;
color: #555;
text-shadow: 0 1px 4px rgba(0,0,0,.5);
border-radius: 20px;
font-size: 20px;
transition: 0.5s;
user-select: none;
overflow: hidden;
}
.container div label span:before
{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50%;
}
.container div label input[type="checkbox"]:checked ~ span
{
width: 100%;
padding: 20px;
padding-right: 60px;
box-sizing: border-box;
background: rgba(0,0,0,0.3);
border: 2px solid #fff;
border-radius: 10px;
font-size: 18px;
color: #fff;
outline: none;
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Search</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="wrapper">
<div class="search_box">
<input type="text" name="box" id="search_text" placeholder="Search by Customer Details" class="form-control" />
</div>
</div>
</head>
<body>
<div id="result"></div>
<div style="clear:both"></div>
</body>
</html>
<script>
$(document).ready(function(){
load_data();
function load_data(query)
{
$.ajax({
url:"fetch.php",
method:"post",
data:{query:query},
success:function(data)
{
$('#result').html(data);
}
});
}
$('#search_text').keyup(function(){
var search = $(this).val();
if(search != '')
{
load_data(search);
}
else
{
load_data();
}
});
});
</script>
´´´