EvilDevil,
с такими пожеланиями лучше потом сразу в раздел работа ...
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.index-entry-slider { height:326px; width:435px; position:relative; float:left; margin:0 30px 35px 0; cursor:default; }
.slider { height:inherit; overflow:hidden; position:relative; width:inherit; border-radius:2px; }
.slides { height:inherit; opacity:0; position:absolute; width:inherit; z-index:0; background-size:100% 100%; -webkit-transform:scale(1.5); -moz-transform:scale(1.5); -o-transform:scale(1.5); transform:scale(1.5); -webkit-transition:transform ease-in-out .5s, opacity ease-in-out .5s; -moz-transition:transform ease-in-out .5s, opacity ease-in-out .5s; -o-transition:transform ease-in-out .5s, opacity ease-in-out .5s ; transition:transform ease-in-out .5s , opacity ease-in-out .5s; }
.slides-overlay { position:relative; top:238px; left:0; background:rgba(0,0,0,0.7); border-top:2px solid #04aeec; height:86px; z-index:1; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }
.slides .slides-overlay:hover { border-top:2px solid #04aeec; background:rgba(0,0,0,0.9); }
.slides a { position:relative; top:0; left:0; display:block; height:79px; padding:7px 5px 0 15px; font-size:21px; color:#fff; font-weight:300; text-decoration:none; z-index:3; }
.slides p { position:relative; top:-46px; left:0; text-align:left; margin:0; font-size:13px; line-height:17px; color:#fff; font-weight:300; padding:0 15px 12px 15px; z-index:2; }
.slide1 { background-image:url(images/index-pvc.jpg); }
.slide2 { background-image:url(images/index-oborudovanie.jpg); }
.slide3 { background-image:url(images/index-nergaveyka.jpg); }
.slide4 { background-image:url(images/index-mayatnikdoor.jpg); }
#slide1:checked ~ .slider > .slide1, #slide2:checked ~ .slider > .slide2, #slide3:checked ~ .slider > .slide3, #slide4:checked ~ .slider > .slide4 { opacity:1; z-index:1; -webkit-transform:scale(1); -moz-transform:scale(1); -o-transform:scale(1); transform:scale(1); }
.index-entry-slider > input { display:none; }
.index-entry-slider .controls { margin:10px 0; text-align:center; }
.index-entry-slider label { cursor:pointer; display:inline-block; height:10px; width:10px; margin:0 5px; position:relative; background:#ddd; -o-border-radius:50%; border-radius:50%; -webkit-transition:background ease-in-out .3s; -moz-transition:background ease-in-out .3s; -o-transition:background ease-in-out .3s; transition:background ease-in-out .3s; }
.index-entry-slider label:hover, #slide1:checked ~ .controls label:nth-of-type(1), #slide2:checked ~ .controls label:nth-of-type(2), #slide3:checked ~ .controls label:nth-of-type(3), #slide4:checked ~ .controls label:nth-of-type(4) { background:#04aeec; box-shadow:0 0 10px rgba(0,0,0,0.5); -moz-box-shadow:0 0 10px rgba(0,0,0,0.5); }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
$(function() {
var slider = $(".index-entry-slider"),
item = $("> input", slider),
block = $(".slides", slider),
pause = 3000,
play = true,
timer;
function sliderAuto() {
var i = item.index($(":checked")),
i = ++i % item.length;
play && item.eq(i).prop({
"checked": true })
timer = window.setTimeout(sliderAuto, pause)
}
slider.on("mouseenter", function() {
play = false;
window.clearTimeout(timer)
});
slider.on("mouseleave", function() {
play = true;
timer = window.setTimeout(sliderAuto, pause)
});
sliderAuto()
});
</script>
</head>
<body>
<div class="index-entry-slider">
<input type="radio" name="point" id="slide1" checked >
<input type="radio" name="point" id="slide2">
<input type="radio" name="point" id="slide3">
<input type="radio" name="point" id="slide4">
<div class="slider">
<div class="slides slide1">
<div class="slides-overlay">
<?php echo('<a href="'.esc_url(get_category_link(1)).'" title="'.get_the_category_by_ID(1).'">'.get_the_category_by_ID(1).'</a>'); ?>
<p>Гибкие ленточные ПВХ завесы (термошторы) снижают затраты на охлаждение и обогрев любых помещений.</p>
</div>
</div>
<div class="slides slide2">
<div class="slides-overlay">
<?php echo('<a href="'.esc_url(get_category_link(15)).'" title="'.get_the_category_by_ID(15).'">'.get_the_category_by_ID(15).'</a>'); ?>
<p>Для изготовления ленточных завес мы постовляем ПВХ ленту европейского качества французской компании Extruflex.</p>
</div>
</div>
<div class="slides slide3">
<div class="slides-overlay">
<?php echo('<a href="'.esc_url(get_category_link(16)).'" title="'.get_the_category_by_ID(16).'">'.get_the_category_by_ID(16).'</a>'); ?>
<p>Современные распашные и откатные термоизоляционные двери для холодильных и морозильных камер.</p>
</div>
</div>
<div class="slides slide4">
<div class="slides-overlay">
<?php echo('<a href="'.esc_url(get_category_link(17)).'" title="'.get_the_category_by_ID(17).'">'.get_the_category_by_ID(17).'</a>'); ?>
<p>Гибкие и жесткие распашные двери открываются в обе стороны и фиксируются в заданном положении.</p>
</div>
</div>
</div>
<div class="controls">
<label for="slide1" data-ami-number="1" title="<?php echo(get_the_category_by_ID(1)); ?>"></label>
<label for="slide2" data-ami-number="2" title="<?php echo(get_the_category_by_ID(15)); ?>"></label>
<label for="slide3" data-ami-number="3" title="<?php echo(get_the_category_by_ID(16)); ?>"></label>
<label for="slide4" data-ami-number="4" title="<?php echo(get_the_category_by_ID(17)); ?>"></label>
</div>
</div>
</body>
</html>