table td{
text-align: left !important;
}
function eventFire(el, etype){
if (el.fireEvent) {
el.fireEvent('on' + etype);
} else {
var evObj = document.createEvent('Events');
evObj.initEvent(etype, true, false);
el.dispatchEvent(evObj);
}
}
var parent = document.getElementById("elements");
var childs = parent.getElementsByTagName('div');
for (var i = 0; i < childs.length; i++) {
if (i = 1) {
eventFire(childs[i], 'click');
break;
}
}
<script type="text/javascript"></script>
и поместить тег в нужных шаблонах HTML перед самым закрытием тега </body>
, либо скопировать код в файл с расширением *.js, затем загрузить на сервер, затем в шаблонах в теге <head></head>
добавить в самом конце линк на него <script type="text/javascript" src="/path/to/your/script.js"></script>
. В обоих случаях, к шаблону должна быть подключена библиотека jQuery.js, Но похоже вы работаете с Wordpress, там она по-любому уже должна быть. <div class="parent">
<span>Text</span>
</div>
.parent {
background-image: url('/image.png');
background-position: center;
background-size: cover;
position: relative;
width: 25vw;
height: 25rem;
}
.parent > * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: inherit;
display: block;
text-align: center;
padding-top: calc(50% - .5rem); /* .5rem это половина вашего font-size */
opacity: 0;
transition: 750ms opacity ease-in-out;
color: #f5f5f5;
background: #f5164E;
}
.parent:hover > * {
opacity: 1;
}