Umožní přidání odkazu blokům Cover, Group a Column.
Obsah
Příklad #1 – Cover
Příklad #2 – Group
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id imperdiet mauris. Ut commodo blandit ante, at rutrum sem elementum non. Nullam congue, justo sed finibus efficitur, metus tellus vestibulum magna, ut auctor arcu lacus sed quam. Vestibulum tincidunt erat eget metus ullamcorper, sed eleifend odio gravida. Praesent elementum, tellus eu dignissim mollis, justo sem lacinia nisl, eget luctus dui augue vitae turpis. Donec sit amet luctus massa. Suspendisse iaculis eros et leo volutpat pellentesque. Cras pulvinar augue vel enim suscipit aliquam. Donec risus ex, semper quis ligula ut, fermentum ornare enim.
Fusce suscipit velit et sapien laoreet eleifend sed at sem. Mauris at pretium metus, eget vulputate dolor. Donec bibendum mauris et dapibus varius. Morbi maximus sed augue ut placerat. Nullam rhoncus, magna in dapibus imperdiet, nisl odio vehicula elit, molestie tristique nisl mauris ut quam. Suspendisse et nunc vehicula, mollis lorem eu, viverra tortor. Nulla pulvinar congue sem, a venenatis sem mollis vulputate. Pellentesque non quam eu felis tincidunt malesuada. Vivamus fringilla eleifend nisi, ut lacinia metus ultricies faucibus. Aenean in turpis nec elit dapibus gravida ut non nulla. Vestibulum ac varius libero, quis facilisis lectus. Donec eros erat, volutpat eget lectus lacinia, vulputate rhoncus lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In felis erat, finibus sit amet faucibus sed, rhoncus eget est. Phasellus fermentum mi quis varius finibus. In eget finibus magna, non ullamcorper tortor.
.example-2:has(a.dd-block-link) {
transition: background-color .9s, border-radius .9s;
}
.example-2:has(a.dd-block-link:hover) {
background-color: #fff2c0 !important;
border-radius: 40px;
}Příklad #3 – Column s hover efektem
.example-3 {
padding: 1rem;
}
.example-3 a.dd-block-link {
display: flex;
justify-content: center; /* Horizontální vycentrování */
align-items: center; /* Vertikální vycentrování */
border: 1px solid #ddd;
background-position: center;
transition: all .2s;
}
.example-3 a.dd-block-link:hover {
background-color: rgba(255, 255, 255, 0.8);
background-image: url('https://ddplugins.ambike.com/wp-content/plugins/dd-clickable-block/link-black.webp');
background-repeat: no-repeat;
background-position: center;
background-size: 50px auto;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.example-3 img {
transition: transform .2s; /* Animation */
}
.example-3:hover img {
transform: scale(1.03);
}Screenshots
