Interactive Image Cards –
To get the Block or CSS click here ⥅
Copy the Block from and paste in your editor ↓
<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"className":"img-card1 ticss-c6495f62","hasCustomCSS":true,"customCSS":":root {\n \u002d\u002dbackground: #19f7ff;\n \u002d\u002dbackground-border: #19f7ff;\n}\n.img-card1{\n position: relative;\n left: 0px;\n width: 140px;\n height: 160px;\n background-color: var(\u002d\u002dbackground);\n border-radius: 8px;\n transition: 1000ms all;\n transform-origin: center left;\n box-shadow: 0 5px 12px rgba(0, 0, 0, 0.5);\n outline: 1px solid var(\u002d\u002dbackground);\n overflow: hidden;\n}\n\n.img-card1-img {\n height: 160px;\n object-fit: cover;\n border-radius: 4px;\n}\n\n.img-card1:hover {\n cursor: pointer;\n transform: scale(1.15);\n}\n\n.img-card1:hover figcaption {\n font-size: 0.6rem;\n position: absolute;\n height: 80px;\n width: 160px;\n display: flex;\n align-items: end;\n background: linear-gradient(\n to top,\n rgba(0, 0, 0, 0.9) 0%,\n rgba(0, 0, 0, 0) 100%\n );\n color: white;\n left: 0px;\n bottom: 0px;\n padding-left: 12px;\n padding-bottom: 10px;\n}\n.img-card1:hover ~ .img-card1 {\n font-weight: bold;\n cursor: pointer;\n transform: translateX(22px);\n}\n"} -->
<div class="wp-block-column img-card1 ticss-c6495f62"><!-- wp:image {"id":152,"width":245,"height":163,"scale":"cover","sizeSlug":"full","linkDestination":"none","className":"img-card1-image"} -->
<figure class="wp-block-image size-full is-resized img-card1-image"><img src="https://csscrafter.com/wp-content/uploads/2023/08/inside-deep-mystical-jungle-canyon-can-be-used-as-background-wallpaper-inside-deep-mystical-jungle-canyon-141652062.webp" alt="" class="wp-image-152" style="object-fit:cover;width:245px;height:163px" width="245" height="163"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->
<!-- wp:column {"className":"img-card1 ticss-c6495f62","hasCustomCSS":true,"customCSS":":root {\n \u002d\u002dbackground: #3c343d;\n \u002d\u002dbackground-border: #6b626c;\n}\n.img-card1{\n position: relative;\n left: 0px;\n width: 140px;\n height: 160px;\n background-color: var(\u002d\u002dbackground);\n border-radius: 8px;\n transition: 1000ms all;\n transform-origin: center left;\n box-shadow: 0 5px 12px rgba(0, 0, 0, 0.5);\n outline: 1px solid var(\u002d\u002dbackground);\n overflow: hidden;\n}\n\n.img-card1-img {\n height: 160px;\n object-fit: cover;\n border-radius: 4px;\n}\n\n.img-card1:hover {\n cursor: pointer;\n transform: scale(1.15);\n}\n\n.img-card1:hover figcaption {\n font-size: 0.6rem;\n position: absolute;\n height: 80px;\n width: 160px;\n display: flex;\n align-items: end;\n background: linear-gradient(\n to top,\n rgba(0, 0, 0, 0.9) 0%,\n rgba(0, 0, 0, 0) 100%\n );\n color: white;\n left: 0px;\n bottom: 0px;\n padding-left: 12px;\n padding-bottom: 10px;\n}\n.img-card1:hover ~ .img-card1 {\n font-weight: bold;\n cursor: pointer;\n transform: translateX(22px);\n}\n"} -->
<div class="wp-block-column img-card1 ticss-c6495f62"><!-- wp:image {"id":153,"width":242,"height":161,"scale":"cover","sizeSlug":"full","linkDestination":"none","className":"img-card1-image"} -->
<figure class="wp-block-image size-full is-resized img-card1-image"><img src="https://csscrafter.com/wp-content/uploads/2023/08/forest.jpg" alt="" class="wp-image-153" style="object-fit:cover;width:242px;height:161px" width="242" height="161"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->
<!-- wp:column {"className":"img-card1 ticss-c6495f62","hasCustomCSS":true,"customCSS":":root {\n \u002d\u002dbackground: #3c343d;\n \u002d\u002dbackground-border: #6b626c;\n}\n.img-card1{\n position: relative;\n left: 0px;\n width: 140px;\n height: 160px;\n background-color: var(\u002d\u002dbackground);\n border-radius: 8px;\n transition: 1000ms all;\n transform-origin: center left;\n box-shadow: 0 5px 12px rgba(0, 0, 0, 0.5);\n outline: 1px solid var(\u002d\u002dbackground);\n overflow: hidden;\n}\n\n.img-card1-img {\n height: 160px;\n object-fit: cover;\n border-radius: 4px;\n}\n\n.img-card1:hover {\n cursor: pointer;\n transform: scale(1.15);\n}\n\n.img-card1:hover figcaption {\n font-size: 0.6rem;\n position: absolute;\n height: 80px;\n width: 160px;\n display: flex;\n align-items: end;\n background: linear-gradient(\n to top,\n rgba(0, 0, 0, 0.9) 0%,\n rgba(0, 0, 0, 0) 100%\n );\n color: white;\n left: 0px;\n bottom: 0px;\n padding-left: 12px;\n padding-bottom: 10px;\n}\n.img-card1:hover ~ .img-card1 {\n font-weight: bold;\n cursor: pointer;\n transform: translateX(22px);\n}\n"} -->
<div class="wp-block-column img-card1 ticss-c6495f62"><!-- wp:image {"id":154,"width":244,"height":162,"scale":"cover","sizeSlug":"full","linkDestination":"none","className":"img-card1-image"} -->
<figure class="wp-block-image size-full is-resized img-card1-image"><img src="https://csscrafter.com/wp-content/uploads/2023/08/lavender-field.jpg" alt="" class="wp-image-154" style="object-fit:cover;width:244px;height:162px" width="244" height="162"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->You will need Block CSS plugin by Themeisle to get the exact block style.
If you need only the CSS code here it is ↓
:root {
--background: #19f7ff;
--background-border: #19f7ff;
}
.img-card1{
position: relative;
left: 0px;
width: 140px;
height: 160px;
background-color: var(--background);
border-radius: 8px;
transition: 1000ms all;
transform-origin: center left;
box-shadow: 0 5px 12px rgba(0, 0, 0, 0.5);
outline: 1px solid var(--background);
overflow: hidden;
}
.img-card1-img {
height: 160px;
object-fit: cover;
border-radius: 4px;
}
.img-card1:hover {
cursor: pointer;
transform: scale(1.15);
}
.img-card1:hover figcaption {
font-size: 0.6rem;
position: absolute;
height: 80px;
width: 160px;
display: flex;
align-items: end;
background: linear-gradient(
to top,
rgba(0, 0, 0, 0.9) 0%,
rgba(0, 0, 0, 0) 100%
);
color: white;
left: 0px;
bottom: 0px;
padding-left: 12px;
padding-bottom: 10px;
}
.img-card1:hover ~ .img-card1 {
font-weight: bold;
cursor: pointer;
transform: translateX(22px);
}
Reveal Socail Handle Card Style –
CSSCrafter
This is where I share my daily work and interact with other Webdevelopers.
CSSCrafter
This is where I share my daily work and interact with other Webdevelopers.
To get the Block or CSS click here ⥅
Copy the Block from and paste in your editor ↓
<!-- wp:columns {"className":"reveal-container ticss-40d275eb","hasCustomCSS":true,"customCSS":".reveal-container .reveal-card {\n position: relative;\n border-radius: 5px;\n}\n\n.reveal-container .reveal-card .reveal-icon {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: #f00;\n transition: 0.7s;\n z-index: 1;\n}\n\n.reveal-container .reveal-card:nth-child(1) .reveal-icon {\n background: linear-gradient(135deg, #405de6, #405de6, #833ab4, #c13584, #e1306c, #fd1d1d, #f56040, #f77737,\n #fcaf45, #ffdc80);\n border-radius: 5px;\n}\n\n\n.reveal-container .reveal-card:nth-child(2) .reveal-icon {\n background: #6eadd4;\n border-radius: 5px;\n}\n\n.reveal-container .reveal-card:nth-child(3) .reveal-icon {\n background: #131418;\n border-radius: 5px;\n}\n\n.reveal-container .reveal-card .reveal-icon .fa {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n font-size: 80px;\n transition: 0.7s;\n color: #fff;\n}\n\n.reveal-container .reveal-card .front {\n width: 250px;\n height: 150px;\n transition: 0.5s;\n border-radius: 5px;\n}\n\n.reveal-container .reveal-card .front.front1 {\n position: relative;\n background: #333;\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 1;\n transform: translateY(100px);\n}\n\n.reveal-container .reveal-card:hover .front.front1{\n background: #ff0057;\n transform: translateY(0px);\n width: 200px;\n height: 100px;\n padding-left: 50px;\n opacity: 0;\n}\n\n.reveal-container .reveal-card .front.front1 .content {\n opacity: 1;\n transition: 0.5s;\n}\n\n.reveal-container .reveal-card:hover .front.front1 .reveal-content{\n opacity: .8;\n}\n\n.reveal-container .reveal-card .front.front1 .reveal-content i{\n max-width: 100px;\n}\n\n.reveal-container .reveal-card .front.front2 {\n position: relative;\n background: transparent;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 20px;\n box-sizing: border-box;\n box-shadow: 0 20px 50px rgba(0,0,0,0.8);\n transform: translateY(-50px);\n}\n\n.reveal-container .reveal-card:hover .front.front2{\n transform: translateY(0);\n}\n"} -->
<div class="wp-block-columns reveal-container ticss-40d275eb"><!-- wp:column {"className":"reveal-card"} -->
<div class="wp-block-column reveal-card"><!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"gradient":"creative-btn","className":"front front1"} -->
<div class="wp-block-column front front1 has-creative-btn-gradient-background has-background"><!-- wp:social-links {"iconColor":"textonprimary","iconColorValue":"#fffffd","size":"has-huge-icon-size","align":"left","style":{"spacing":{"margin":{"top":"0","bottom":"var:preset|spacing|70","left":"var:preset|spacing|20","right":"var:preset|spacing|80"},"blockGap":{"top":"0"}}},"className":"reveal-content is-style-logos-only","layout":{"type":"flex","flexWrap":"wrap","justifyContent":"left"}} -->
<ul class="wp-block-social-links alignleft has-huge-icon-size has-icon-color reveal-content is-style-logos-only" style="margin-top:0;margin-right:var(--wp--preset--spacing--80);margin-bottom:var(--wp--preset--spacing--70);margin-left:var(--wp--preset--spacing--20)"><!-- wp:social-link {"url":"csscrafter","service":"instagram","label":"#","className":"reveal-icon"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"className":"front front2"} -->
<div class="wp-block-column front front2"><!-- wp:group {"className":"reveal-content","layout":{"type":"constrained"}} -->
<div class="wp-block-group reveal-content"><!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">CSSCrafter</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"align":"center","style":{"typography":{"fontSize":"14px"}}} -->
<p class="has-text-align-center" style="font-size:14px">This is where I share my daily work and interact with other Webdevelopers.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->
<!-- wp:column {"className":"reveal-card"} -->
<div class="wp-block-column reveal-card"><!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"backgroundColor":"secondary","className":"front front1"} -->
<div class="wp-block-column front front1 has-secondary-background-color has-background"><!-- wp:social-links {"iconColor":"textonprimary","iconColorValue":"#fffffd","size":"has-huge-icon-size","align":"left","style":{"spacing":{"margin":{"top":"0","bottom":"0","left":"var:preset|spacing|80","right":"var:preset|spacing|80"},"blockGap":{"top":"0"}}},"className":"reveal-content is-style-logos-only","layout":{"type":"flex","flexWrap":"wrap","justifyContent":"left"}} -->
<ul class="wp-block-social-links alignleft has-huge-icon-size has-icon-color reveal-content is-style-logos-only" style="margin-top:0;margin-right:var(--wp--preset--spacing--80);margin-bottom:0;margin-left:var(--wp--preset--spacing--80)"><!-- wp:social-link {"url":"@csscrfter","service":"twitter"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"className":"front front2"} -->
<div class="wp-block-column front front2"><!-- wp:group {"className":"reveal-content","layout":{"type":"constrained"}} -->
<div class="wp-block-group reveal-content"><!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">CSSCrafter</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"align":"center","style":{"typography":{"fontSize":"14px"}}} -->
<p class="has-text-align-center" style="font-size:14px">This is where I share my daily work and interact with other Webdevelopers.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->You will need Block CSS plugin by Themeisle to get the exact block style.
If you need only the CSS code here it is ↓
.reveal-container .reveal-card {
position: relative;
border-radius: 5px;
}
.reveal-container .reveal-card .reveal-icon {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #f00;
transition: 0.7s;
z-index: 1;
}
.reveal-container .reveal-card:nth-child(1) .reveal-icon {
background: linear-gradient(135deg, #405de6, #405de6, #833ab4, #c13584, #e1306c, #fd1d1d, #f56040, #f77737,
#fcaf45, #ffdc80);
border-radius: 5px;
}
.reveal-container .reveal-card:nth-child(2) .reveal-icon {
background: #6eadd4;
border-radius: 5px;
}
.reveal-container .reveal-card:nth-child(3) .reveal-icon {
background: #131418;
border-radius: 5px;
}
.reveal-container .reveal-card .reveal-icon .fa {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 80px;
transition: 0.7s;
color: #fff;
}
.reveal-container .reveal-card .front {
width: 250px;
height: 150px;
transition: 0.5s;
border-radius: 5px;
}
.reveal-container .reveal-card .front.front1 {
position: relative;
background: #333;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
transform: translateY(100px);
}
.reveal-container .reveal-card:hover .front.front1{
background: #ff0057;
transform: translateY(0px);
width: 200px;
height: 100px;
padding-left: 50px;
opacity: 0;
}
.reveal-container .reveal-card .front.front1 .content {
opacity: 1;
transition: 0.5s;
}
.reveal-container .reveal-card:hover .front.front1 .reveal-content{
opacity: .8;
}
.reveal-container .reveal-card .front.front1 .reveal-content i{
max-width: 100px;
}
.reveal-container .reveal-card .front.front2 {
position: relative;
background: transparent;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
box-sizing: border-box;
box-shadow: 0 20px 50px rgba(0,0,0,0.8);
transform: translateY(-50px);
}
.reveal-container .reveal-card:hover .front.front2{
transform: translateY(0);
}
Gide for changing the social icon or underneath texts in the block editor. To change the icon or texts you will need to stop the hover effect, to do that, just find “front front1” classes and cut those, then do the necessary changes and then place it in the same place. Your style will be ready again.
SS of the class finding place, it will be immidiate top column of the social icon block- link
Gradient Border Card with Button Interaction –
01
Service one
lorem ipsum dolor sit amet,consectetur adipisicing elit, sed do eiusmod
02
Service two
lorem ipsum dolor sit amet,consectetur adipisicing elit, sed do eiusmod
03
Service three
lorem ipsum dolor sit amet,consectetur adipisicing elit, sed do eiusmod
To get the Block or CSS, click here ⥅
Copy the Block from and paste in your editor ↓
<!-- wp:columns {"className":"ticss-c81e6e22","hasCustomCSS":true,"customCSS":".gradient-border-card .gradient-border-card-box:nth-child(1):before\n{\n\tbackground: linear-gradient(315deg,#ff0057,#e64a19);\n}\n.gradient-border-card .gradient-border-card-box:nth-child(2):before\n{\n padding:10px;\n\tbackground: linear-gradient(315deg,#89ff00,#00bcd4)\t\n}\n.gradient-border-card .gradient-border-card-box:nth-child(3):before\n{ padding:10px;\n\tbackground: linear-gradient(315deg,#e91e63,#5d02ff)\n\n}\n.gradient-border-card .gradient-border-card-box:nth-child(4):before\n{padding:10px;\n\tbackground: linear-gradient(315deg,#ff0000,#ffc107)\n}"} -->
<div class="wp-block-columns ticss-c81e6e22"><!-- wp:column {"className":"ticss-962f4080","hasCustomCSS":true,"customCSS":".gradient-border-card1{\n border-radius:10px;\n\tbackground:linear-gradient(315deg,#01BDD2,#87FE0E);\n padding:5px\n}\n\n"} -->
<div class="wp-block-column ticss-962f4080"><!-- wp:columns {"style":{"border":{"width":"0px","style":"none","radius":"8px"}},"className":"gradient-border-card gradient-border-card1 ticss-b22e528c","hasCustomCSS":true,"customCSS":".gradient-border-card .gradient-border-card-box{position: relative;\n\theight: 400px;\n\tbackground: #060c21;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tborder: 1px solid #000;\n \n}\n.gradient-border-card .gradient-border-card-box:before\n{\n\tcontent: '';\n\tposition: absolute;\n\ttop: -2px;\n\tleft: -2px;\n\tright: -2px;\n\tbottom: -2px;\n\tbackground: #fff;\n\ttransform: skew(2deg,2deg);\n\tz-index: -1;\n}\n.gradient-border-card .gradient-border-card-box:nth-child(1):before\n{padding:10px;\n\tbackground: linear-gradient(315deg,#ff0057,#e64a19);\n}\n.gradient-border-card .gradient-border-card-box:nth-child(2):before\n{padding:10px;\n\tbackground: linear-gradient(315deg,#89ff00,#00bcd4)\t\n}\n.gradient-border-card .gradient-border-card-box:nth-child(3):before\n{padding:10px;\n\tbackground: linear-gradient(315deg,#e91e63,#5d02ff)\n}\n.gradient-border-card .gradient-border-card-box:nth-child(4):before\n{padding:10px;\n\tbackground: linear-gradient(315deg,#ff0000,#ffc107)\n}\n.gradient-border-card .gradient-border-card-box:after\n{\n\tcontent: '';\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\twidth: 50%;\n\theight: 100%;\n\tbackground: rgba(255,255,255,0.05);\n\tpointer-events: none;\n}\n.gradient-border-card-content{\n\tposition: relative;\n\tpadding: 20px;\n\ttransform: translateY(40px);\n}\n.gradient-border-card-box .gradient-border-card-content .gradient-border-card-number{\n\tposition: absolute;\n\ttop: -60px;\n\tright: 20px;\n\tmargin: 0;\n\tpadding: 0;\n\tfont-size: 95px!important;\n\tcolor: rgba(255,255,255,.05);\n\ttransition: 0.5s;\n}\n.gradient-border-card-box:hover .gradient-border-card-content .gradient-border-card-number{\n\ttop: -140px;\n}\n.gradient-border-card-box .gradient-border-card-content .gradient-border-card-title{\n\tmargin: 0 0 10px;\n\tpadding: 0;\n\tfont-size: 24px;\n\tfont-weight: 500;\n\tcolor: #fff;\n}\n.gradient-border-card-box .gradient-border-card-content .gradient-border-card-service-details{\n margin: 0;\n\tpadding: 0;\n\tcolor: #fff;\n\tfont-size: 16px;\n}\n.gradient-border-card-box .gradient-border-card-content .gradient-border-card-button{\n\tposition: relative;\n\tmargin: 20px 0 0;\n\tpadding: 10px 20px;\n\ttext-decoration: none;\n\tborder: 1px solid #fff;\n\tdisplay: inline-block;\n\tcolor: #fff;\n\ttransition: 0.5s;\n\ttransform: translateY(-40px);\n\topacity: 0;\n\tvisibility: hidden;\n}\n.gradient-border-card-box:hover .gradient-border-card-content .gradient-border-card-button{\n\ttransform: translateY(0);\n\topacity: 1;\n\tvisibility: visible;\n}\n.gradient-border-card-box .gradient-border-card-content .gradient-border-card-button:hover\n{\n\tcolor: #000;\n}\n"} -->
<div class="wp-block-columns gradient-border-card gradient-border-card1 ticss-b22e528c" style="border-style:none;border-width:0px;border-radius:8px"><!-- wp:column {"style":{"border":{"width":"0px","style":"none"}},"className":"gradient-border-card-box ticss-13f38842","hasCustomCSS":true,"customCSS":".gradient-border-card-box {border-radius:10px;\n}\n"} -->
<div class="wp-block-column gradient-border-card-box ticss-13f38842" style="border-style:none;border-width:0px"><!-- wp:group {"style":{"spacing":{"padding":{"right":"var:preset|spacing|20","left":"var:preset|spacing|20"}}},"className":"gradient-border-card-content","layout":{"type":"constrained"}} -->
<div class="wp-block-group gradient-border-card-content" style="padding-right:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--20)"><!-- wp:heading {"style":{"typography":{"fontSize":"72px"}},"className":"gradient-border-card-number"} -->
<h2 class="wp-block-heading gradient-border-card-number" id="01" style="font-size:72px">01</h2>
<!-- /wp:heading -->
<!-- wp:heading {"level":3,"className":"gradient-border-card-title"} -->
<h3 class="wp-block-heading gradient-border-card-title" id="service-one">Service one</h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"className":"gradient-border-card-service-details"} -->
<p class="gradient-border-card-service-details">lorem ipsum dolor sit amet,consectetur adipisicing elit, sed do eiusmod</p>
<!-- /wp:paragraph -->
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"custom-dark-blue-2","textColor":"contrastcolor","width":100,"style":{"border":{"width":"0px","style":"none"}},"className":"gradient-border-card-button is-style-outline"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 gradient-border-card-button is-style-outline"><a class="wp-block-button__link has-contrastcolor-color has-custom-dark-blue-2-background-color has-text-color has-background wp-element-button" href="#" style="border-style:none;border-width:0px">Read More</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:column -->
<!-- wp:column {"className":"ticss-5263c135","hasCustomCSS":true,"customCSS":".gradient-border-card2{\n border-radius:10px;\n\tbackground:linear-gradient(315deg,#e91e63,#5d02ff);\n padding:5px\n}"} -->
<div class="wp-block-column ticss-5263c135"><!-- wp:columns {"style":{"border":{"width":"0px","style":"none"}},"className":"gradient-border-card gradient-border-card2 ticss-b22e528c","hasCustomCSS":true,"customCSS":".gradient-border-card .gradient-border-card-box{position: relative;\n\theight: 400px;\n\tbackground: #060c21;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tborder: 1px solid #000;\n \n}\n.gradient-border-card .gradient-border-card-box:before\n{\n\tcontent: '';\n\tposition: absolute;\n\ttop: -2px;\n\tleft: -2px;\n\tright: -2px;\n\tbottom: -2px;\n\tbackground: #fff;\n\ttransform: skew(2deg,2deg);\n\tz-index: -1;\n}\n.gradient-border-card .gradient-border-card-box:nth-child(1):before\n{\n\tbackground: linear-gradient(315deg,#ff0057,#e64a19);\n}\n.gradient-border-card .gradient-border-card-box:nth-child(2):before\n{\n\tbackground: linear-gradient(315deg,#89ff00,#00bcd4)\t\n}\n.gradient-border-card .gradient-border-card-box:nth-child(3):before\n{\n\tbackground: linear-gradient(315deg,#e91e63,#5d02ff)\n}\n.gradient-border-card .gradient-border-card-box:nth-child(4):before\n{\n\tbackground: linear-gradient(315deg,#ff0000,#ffc107)\n}\n.gradient-border-card .gradient-border-card-box:after\n{\n\tcontent: '';\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\twidth: 50%;\n\theight: 100%;\n\tbackground: rgba(255,255,255,0.05);\n\tpointer-events: none;\n}\n.gradient-border-card-content{\n\tposition: relative;\n\tpadding: 20px;\n\ttransform: translateY(40px);\n}\n.gradient-border-card-box .gradient-border-card-content .gradient-border-card-number{\n\tposition: absolute;\n\ttop: -60px;\n\tright: 20px;\n\tmargin: 0;\n\tpadding: 0;\n\tfont-size: 95px!important;\n\tcolor: rgba(255,255,255,.05);\n\ttransition: 0.5s;\n}\n.gradient-border-card-box:hover .gradient-border-card-content .gradient-border-card-number{\n\ttop: -140px;\n}\n.gradient-border-card-box .gradient-border-card-content .gradient-border-card-title{\n\tmargin: 0 0 10px;\n\tpadding: 0;\n\tfont-size: 24px;\n\tfont-weight: 500;\n\tcolor: #fff;\n}\n.gradient-border-card-box .gradient-border-card-content .gradient-border-card-service-details{\n margin: 0;\n\tpadding: 0;\n\tcolor: #fff;\n\tfont-size: 16px;\n}\n.gradient-border-card-box .gradient-border-card-content .gradient-border-card-button{\n\tposition: relative;\n\tmargin: 20px 0 0;\n\tpadding: 10px 20px;\n\ttext-decoration: none;\n\tborder: 1px solid #fff;\n\tdisplay: inline-block;\n\tcolor: #fff;\n\ttransition: 0.5s;\n\ttransform: translateY(-40px);\n\topacity: 0;\n\tvisibility: hidden;\n}\n.gradient-border-card-box:hover .gradient-border-card-content .gradient-border-card-button{\n\ttransform: translateY(0);\n\topacity: 1;\n\tvisibility: visible;\n}\n.gradient-border-card-box .gradient-border-card-content .gradient-border-card-button:hover\n{\n\tcolor: #000;\n}"} -->
<div class="wp-block-columns gradient-border-card gradient-border-card2 ticss-b22e528c" style="border-style:none;border-width:0px"><!-- wp:column {"style":{"border":{"width":"0px","style":"none"}},"className":"gradient-border-card-box"} -->
<div class="wp-block-column gradient-border-card-box" style="border-style:none;border-width:0px"><!-- wp:group {"style":{"spacing":{"padding":{"right":"var:preset|spacing|20","left":"var:preset|spacing|20"}}},"className":"gradient-border-card-content","layout":{"type":"constrained"}} -->
<div class="wp-block-group gradient-border-card-content" style="padding-right:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--20)"><!-- wp:heading {"style":{"typography":{"fontSize":"72px"}},"className":"gradient-border-card-number"} -->
<h2 class="wp-block-heading gradient-border-card-number" id="01" style="font-size:72px">02</h2>
<!-- /wp:heading -->
<!-- wp:heading {"level":3,"className":"gradient-border-card-title"} -->
<h3 class="wp-block-heading gradient-border-card-title" id="service-one">Service two</h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"className":"gradient-border-card-service-details"} -->
<p class="gradient-border-card-service-details">lorem ipsum dolor sit amet,consectetur adipisicing elit, sed do eiusmod</p>
<!-- /wp:paragraph -->
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"custom-dark-blue-2","textColor":"contrastcolor","width":100,"style":{"border":{"width":"0px","style":"none"}},"className":"gradient-border-card-button is-style-outline"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 gradient-border-card-button is-style-outline"><a class="wp-block-button__link has-contrastcolor-color has-custom-dark-blue-2-background-color has-text-color has-background wp-element-button" href="#" style="border-style:none;border-width:0px">Read More</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:column -->
<!-- wp:column {"className":"ticss-40c8e0b3","hasCustomCSS":true,"customCSS":".gradient-border-card3{\n border-radius:10px;\n\tbackground:linear-gradient(315deg,#ff0000,#ffc107);\n padding:5px\n}"} -->
<div class="wp-block-column ticss-40c8e0b3"><!-- wp:columns {"style":{"border":{"width":"0px","style":"none"}},"className":"gradient-border-card gradient-border-card3 ticss-b22e528c","hasCustomCSS":true,"customCSS":".gradient-border-card .gradient-border-card-box{position: relative;\n\theight: 400px;\n\tbackground: #060c21;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tborder: 1px solid #000;\n \n}\n.gradient-border-card .gradient-border-card-box:before\n{\n\tcontent: '';\n\tposition: absolute;\n\ttop: -2px;\n\tleft: -2px;\n\tright: -2px;\n\tbottom: -2px;\n\tbackground: #fff;\n\ttransform: skew(2deg,2deg);\n\tz-index: -1;\n}\n.gradient-border-card .gradient-border-card-box:nth-child(1):before\n{\n\tbackground: linear-gradient(315deg,#ff0057,#e64a19);\n}\n.gradient-border-card .gradient-border-card-box:nth-child(2):before\n{\n\tbackground: linear-gradient(315deg,#89ff00,#00bcd4)\t\n}\n.gradient-border-card .gradient-border-card-box:nth-child(3):before\n{\n\tbackground: linear-gradient(315deg,#e91e63,#5d02ff)\n}\n.gradient-border-card .gradient-border-card-box:nth-child(4):before\n{\n\tbackground: linear-gradient(315deg,#ff0000,#ffc107)\n}\n.gradient-border-card .gradient-border-card-box:after\n{\n\tcontent: '';\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\twidth: 50%;\n\theight: 100%;\n\tbackground: rgba(255,255,255,0.05);\n\tpointer-events: none;\n}\n.gradient-border-card-content{\n\tposition: relative;\n\tpadding: 20px;\n\ttransform: translateY(40px);\n}\n.gradient-border-card-box .gradient-border-card-content .gradient-border-card-number{\n\tposition: absolute;\n\ttop: -60px;\n\tright: 20px;\n\tmargin: 0;\n\tpadding: 0;\n\tfont-size: 95px!important;\n\tcolor: rgba(255,255,255,.05);\n\ttransition: 0.5s;\n}\n.gradient-border-card-box:hover .gradient-border-card-content .gradient-border-card-number{\n\ttop: -140px;\n}\n.gradient-border-card-box .gradient-border-card-content .gradient-border-card-title{\n\tmargin: 0 0 10px;\n\tpadding: 0;\n\tfont-size: 24px;\n\tfont-weight: 500;\n\tcolor: #fff;\n}\n.gradient-border-card-box .gradient-border-card-content .gradient-border-card-service-details{\n margin: 0;\n\tpadding: 0;\n\tcolor: #fff;\n\tfont-size: 16px;\n}\n.gradient-border-card-box .gradient-border-card-content .gradient-border-card-button{\n\tposition: relative;\n\tmargin: 20px 0 0;\n\tpadding: 10px 20px;\n\ttext-decoration: none;\n\tborder: 1px solid #fff;\n\tdisplay: inline-block;\n\tcolor: #fff;\n\ttransition: 0.5s;\n\ttransform: translateY(-40px);\n\topacity: 0;\n\tvisibility: hidden;\n}\n.gradient-border-card-box:hover .gradient-border-card-content .gradient-border-card-button{\n\ttransform: translateY(0);\n\topacity: 1;\n\tvisibility: visible;\n}\n.gradient-border-card-box .gradient-border-card-content .gradient-border-card-button:hover\n{\n\tcolor: #000;\n}"} -->
<div class="wp-block-columns gradient-border-card gradient-border-card3 ticss-b22e528c" style="border-style:none;border-width:0px"><!-- wp:column {"style":{"border":{"width":"0px","style":"none"}},"className":"gradient-border-card-box"} -->
<div class="wp-block-column gradient-border-card-box" style="border-style:none;border-width:0px"><!-- wp:group {"style":{"spacing":{"padding":{"right":"var:preset|spacing|20","left":"var:preset|spacing|20"}}},"className":"gradient-border-card-content","layout":{"type":"constrained"}} -->
<div class="wp-block-group gradient-border-card-content" style="padding-right:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--20)"><!-- wp:heading {"style":{"typography":{"fontSize":"72px"}},"className":"gradient-border-card-number"} -->
<h2 class="wp-block-heading gradient-border-card-number" id="01" style="font-size:72px">03</h2>
<!-- /wp:heading -->
<!-- wp:heading {"level":3,"className":"gradient-border-card-title"} -->
<h3 class="wp-block-heading gradient-border-card-title" id="service-one">Service three</h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"className":"gradient-border-card-service-details"} -->
<p class="gradient-border-card-service-details">lorem ipsum dolor sit amet,consectetur adipisicing elit, sed do eiusmod</p>
<!-- /wp:paragraph -->
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"custom-dark-blue-2","textColor":"contrastcolor","width":100,"style":{"border":{"width":"0px","style":"none"}},"className":"gradient-border-card-button is-style-outline"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 gradient-border-card-button is-style-outline"><a class="wp-block-button__link has-contrastcolor-color has-custom-dark-blue-2-background-color has-text-color has-background wp-element-button" href="#" style="border-style:none;border-width:0px">Read More</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->You will need Block CSS plugin by Themeisle to get the exact block syle.
If you need only the CSS code here it is ↓
<div class="container">
<div class="box">
<div class="content">
<h2>01</h2>
<h3>service one </h3>
<p> lorem ipsum dolor sit amet,consectetur adipisicing elit, sed do eiusmod</p>
<a href="#">read more</a>
</div>
</div>
<div class="box">
<div class="content">
<h2>02</h2>
<h3>service one </h3>
<p> lorem ipsum dolor sit amet,consectetur adipisicing elit, sed do eiusmod</p>
<a href="#">read more</a>
</div>
</div>
<div class="box">
<div class="content">
<h2>03</h2>
<h3>service one </h3>
<p> lorem ipsum dolor sit amet,consectetur adipisicing elit, sed do eiusmod</p>
<a href="#">read more</a>
</div>
</div>
</div>You will need these HTML code to perform the particle effect –
<div class="container">
<div class="box">
<div class="content">
<h2>01</h2>
<h3>service one </h3>
<p> lorem ipsum dolor sit amet,consectetur adipisicing elit, sed do eiusmod</p>
<a href="#">read more</a>
</div>
</div>
<div class="box">
<div class="content">
<h2>02</h2>
<h3>service one </h3>
<p> lorem ipsum dolor sit amet,consectetur adipisicing elit, sed do eiusmod</p>
<a href="#">read more</a>
</div>
</div>
<div class="box">
<div class="content">
<h2>03</h2>
<h3>service one </h3>
<p> lorem ipsum dolor sit amet,consectetur adipisicing elit, sed do eiusmod</p>
<a href="#">read more</a>
</div>
</div>
</div>Image Card with Zoom Effect –
Image Hover Effect 1
Image Hover Effect by CSScrafter
To get the Block or CSS, click here ⥅
Copy the Block from and paste in your editor ↓
<!-- wp:columns {"className":"ticss-a04776e9","hasCustomCSS":true,"customCSS":".image-card-effect-1-main{\n margin: 1rem;\n\n position: relative;\n width: 34rem;\n height: 50rem;\n overflow: hidden;\n}\n.image-card-effect-1-bgimage{\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n}\n.image-card-effect-1-info{\n color: hsl(0, 0%, 90%);\n position: absolute;\n bottom: 40px;\n left: 30px;\n}\n.image-card-effect-1-heading{\n font-size: 4rem;\n letter-spacing: 2px;\n text-transform: uppercase;\n opacity: .8;\n font-weight: 900;\n padding-left:10px;\n}\n.image-card-effect-1-text{\n font-size: 1.6rem;\n opacity: .6;\n padding-left: 1rem;\n}\n.image-card-effect-1 .image-card-effect-1-bgimage{\n transform: scale(.9);\n transition: .4s;\n}\n.image-card-effect-1:hover .image-card-effect-1-bgimage{\n transform: scale(1);\n}"} -->
<div class="wp-block-columns ticss-a04776e9"><!-- wp:column {"className":"image-card-effect-1-main image-card-effect-1 ticss-346a63e5","hasCustomCSS":true,"customCSS":".image-card-effect-1-main{\n margin: 1rem;\n\n position: relative;\n width: 34rem;\n height: 50rem;\n overflow: hidden;\n}\n.image-card-effect-1-bgimage{\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n}\n.image-card-effect-1-info{\n color: hsl(0, 0%, 90%);\n position: absolute;\n bottom: 40px;\n left: 30px;\n}\n.image-card-effect-1-heading{\n font-size: 4rem;\n letter-spacing: 2px;\n text-transform: uppercase;\n opacity: .8;\n font-weight: 900;\n}\n.image-card-effect-1-text{\n font-size: 1.6rem;\n opacity: .6;\n padding-left: 1rem;\n}\n.image-card-effect-1 .image-card-effect-1-bgimage{\n transform: scale(.9);\n transition: .4s;\n}\n.image-card-effect-1:hover .image-card-effect-1-bgimage{\n transform: scale(1);\n}"} -->
<div class="wp-block-column image-card-effect-1-main image-card-effect-1 ticss-346a63e5"><!-- wp:image {"id":152,"sizeSlug":"full","linkDestination":"none","style":{"border":{"radius":"20px"},"color":{"duotone":["#050505","#ff9400"]}},"className":"image-card-effect-1-bgimage is-style-rounded"} -->
<figure class="wp-block-image size-full has-custom-border image-card-effect-1-bgimage is-style-rounded"><img src="https://csscrafter.com/wp-content/uploads/2023/08/inside-deep-mystical-jungle-canyon-can-be-used-as-background-wallpaper-inside-deep-mystical-jungle-canyon-141652062.webp" alt="" class="wp-image-152" style="border-radius:20px"/></figure>
<!-- /wp:image -->
<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"className":"image-card-effect-1-info ticss-3f2cf579","hasCustomCSS":true,"customCSS":"\n"} -->
<div class="wp-block-column image-card-effect-1-info ticss-3f2cf579"><!-- wp:heading {"style":{"spacing":{"margin":{"top":"0","bottom":"0"}}},"className":"image-card-effect-1-heading ticss-9c6eae42","hasCustomCSS":true,"customCSS":".image-card-effect-1-heading {\n margin-bottom:-100px;\n}\n"} -->
<h2 class="wp-block-heading image-card-effect-1-heading ticss-9c6eae42" id="image-hover-effect-1" style="margin-top:0;margin-bottom:0">Image Hover Effect 1</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"className":"image-card-effect-1-text"} -->
<p class="image-card-effect-1-text">Image Hover Effect by CSScrafter</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->You will need Block CSS plugin by Themeisle to get the exact block syle.
If you need only the CSS code here it is ↓
.image-card-effect-1-main{
margin: 1rem;
position: relative;
width: 34rem;
height: 50rem;
overflow: hidden;
}
.image-card-effect-1-bgimage{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.image-card-effect-1-info{
color: hsl(0, 0%, 90%);
position: absolute;
bottom: 40px;
left: 30px;
}
.image-card-effect-1-heading{
font-size: 4rem;
letter-spacing: 2px;
text-transform: uppercase;
opacity: .8;
font-weight: 900;
padding-left:10px;
}
.image-card-effect-1-text{
font-size: 1.6rem;
opacity: .6;
padding-left: 1rem;
}
.image-card-effect-1 .image-card-effect-1-bgimage{
transform: scale(.9);
transition: .4s;
}
.image-card-effect-1:hover .image-card-effect-1-bgimage{
transform: scale(1);
}Image Card Effect with Hover Text Reveal Effect –
Hero
Image Hover Effect 2 by CSScrafter
To get the Block or CSS, click here ⥅
Copy the Block from and paste in your editor ↓
<!-- wp:columns {"className":"ticss-a04776e9","hasCustomCSS":true,"customCSS":".image-card-effect-2-main{\n margin: 1rem;\n\n position: relative;\n width: 34rem;\n height: 50rem;\n overflow: hidden;\n}\n.image-card-effect-2-bgimage{\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n}\n.image-card-effect-2-info{\n color: hsl(0, 0%, 90%);\n position: absolute;\n bottom: 40px;\n left: 30px;\n}\n.image-card-effect-2-heading{\n font-size: 4rem;\n letter-spacing: 2px;\n text-transform: uppercase;\n opacity: .8;\n font-weight: 900;\n padding-left:10px;\n}\n.image-card-effect-2-text{\n font-size: 1.6rem;\n opacity: .6;\n padding-left: 1rem;\n}\n.image-card-effect-2 .image-card-effect-2-info{\n top: 50%;\n left: 50%;\n bottom: unset;\n text-align: center;\n transform: translate(-50%, -50%);\n}\n.image-card-effect-2 .image-card-effect-2-heading{\n transform: scale(2);\n opacity: 0;\n transition: .5s;\n}\n.image-card-effect-2 .image-card-effect-2-text{\n padding-left: 0;\n transform: scale(1.2);\n opacity: 0;\n transition: .4s;\n}\n.image-card-effect-2:hover .image-card-effect-2-heading{\n opacity: .8;\n transform: scale(1);\n}\n.image-card-effect-2:hover .image-card-effect-2-text{\n opacity: .6;\n transform: scale(1);\n}"} -->
<div class="wp-block-columns ticss-a04776e9"><!-- wp:column {"className":"image-card-effect-2-main image-card-effect-2 ticss-346a63e5","hasCustomCSS":true,"customCSS":".image-card-effect-1-main{\n margin: 1rem;\n\n position: relative;\n width: 34rem;\n height: 50rem;\n overflow: hidden;\n}\n.image-card-effect-1-bgimage{\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n}\n.image-card-effect-1-info{\n color: hsl(0, 0%, 90%);\n position: absolute;\n bottom: 40px;\n left: 30px;\n}\n.image-card-effect-1-heading{\n font-size: 4rem;\n letter-spacing: 2px;\n text-transform: uppercase;\n opacity: .8;\n font-weight: 900;\n}\n.image-card-effect-1-text{\n font-size: 1.6rem;\n opacity: .6;\n padding-left: 1rem;\n}\n.image-card-effect-1 .image-card-effect-1-bgimage{\n transform: scale(.9);\n transition: .4s;\n}\n.image-card-effect-1:hover .image-card-effect-1-bgimage{\n transform: scale(1);\n}"} -->
<div class="wp-block-column image-card-effect-2-main image-card-effect-2 ticss-346a63e5"><!-- wp:image {"id":156,"sizeSlug":"large","linkDestination":"none","style":{"border":{"radius":"20px"},"color":{"duotone":["#050505","#de1414"]}},"className":"image-card-effect-2-bgimage is-style-rounded"} -->
<figure class="wp-block-image size-large has-custom-border image-card-effect-2-bgimage is-style-rounded"><img src="https://csscrafter.com/wp-content/uploads/2023/08/dark_rider-cover-682x1024.jpg" alt="" class="wp-image-156" style="border-radius:20px"/></figure>
<!-- /wp:image -->
<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"className":"image-card-effect-2-info ticss-3f2cf579","hasCustomCSS":true,"customCSS":"\n"} -->
<div class="wp-block-column image-card-effect-2-info ticss-3f2cf579"><!-- wp:heading {"style":{"spacing":{"margin":{"top":"0","bottom":"0"}}},"className":"image-card-effect-2-heading ticss-9c6eae42","hasCustomCSS":true,"customCSS":".image-card-effect-1-heading {\n margin-bottom:-100px;\n}\n"} -->
<h2 class="wp-block-heading image-card-effect-2-heading ticss-9c6eae42" id="image-hover-effect-1" style="margin-top:0;margin-bottom:0">Hero</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"className":"image-card-effect-2-text"} -->
<p class="image-card-effect-2-text">Image Hover Effect 2 by CSScrafter</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->You will need Block CSS plugin by Themeisle to get the exact block syle.
If you need only the CSS code here it is ↓
.image-card-effect-2-main{
margin: 1rem;
position: relative;
width: 34rem;
height: 50rem;
overflow: hidden;
}
.image-card-effect-2-bgimage{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.image-card-effect-2-info{
color: hsl(0, 0%, 90%);
position: absolute;
bottom: 40px;
left: 30px;
}
.image-card-effect-2-heading{
font-size: 4rem;
letter-spacing: 2px;
text-transform: uppercase;
opacity: .8;
font-weight: 900;
padding-left:10px;
}
.image-card-effect-2-text{
font-size: 1.6rem;
opacity: .6;
padding-left: 1rem;
}
.image-card-effect-2 .image-card-effect-2-info{
top: 50%;
left: 50%;
bottom: unset;
text-align: center;
transform: translate(-50%, -50%);
}
.image-card-effect-2 .image-card-effect-2-heading{
transform: scale(2);
opacity: 0;
transition: .5s;
}
.image-card-effect-2 .image-card-effect-2-text{
padding-left: 0;
transform: scale(1.2);
opacity: 0;
transition: .4s;
}
.image-card-effect-2:hover .image-card-effect-2-heading{
opacity: .8;
transform: scale(1);
}
.image-card-effect-2:hover .image-card-effect-2-text{
opacity: .6;
transform: scale(1);
}Image Card Effect –
Hero
Image Hover Effect 3 by CSScrafter
To get the Block or CSS, click here ⥅
Copy the Block from and paste in your editor ↓
<!-- wp:columns {"className":"ticss-a04776e9","hasCustomCSS":true,"customCSS":".image-card-effect-3-main{\n margin: 1rem;\n\n position: relative;\n width: 34rem;\n height: 50rem;\n overflow: hidden;\n}\n.image-card-effect-3-bgimage{\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n}\n.image-card-effect-3-info{\n color: hsl(0, 0%, 90%);\n position: absolute;\n bottom: 40px;\n left: 5px;\n}\n.image-card-effect-3-heading{\n font-size: 4rem;\n letter-spacing: 2px;\n text-transform: uppercase;\n opacity: .8;\n font-weight: 900;\n padding-left:10px;\n}\n.image-card-effect-3-text{\n font-size: 1.6rem;\n opacity: .6;\n padding-left: 1rem;\n}\n.image-card-effect-3 .image-card-effect-3-heading{\n position: relative;\n color: hsla(0, 0%, 90%, .5);\n}\n.image-card-effect-3 .image-card-effect-2-heading span {\n color: hsl(0, 0%, 90%);\n position: absolute;\n right: 0;\n top: 0;\n opacity: 0;\n transform: scale(1.4);\n transition: .5s;\n}\n.image-card-effect-3:hover .image-card-effect-3-heading span {\n opacity: 1;\n transform: scale(1);\n}\n.image-card-effect-3 .image-card-effect-3-info{\n text-align: right;\n right: 30px;\n left: unset;\n}\n.image-card-effect-3 .image-card-effect-3-text{\n padding-left: 0;\n padding-right: 1rem;\n}\n.image-card-effect-3 .image-card-effect-3-bgimage{\n transition: .5s;\n}\n.image-card-effect-3 .image-card-effect-3-bgimage{\n transform: scale(.9);\n}"} -->
<div class="wp-block-columns ticss-a04776e9"><!-- wp:column {"className":"image-card-effect-3-main image-card-effect-3 ticss-346a63e5","hasCustomCSS":true,"customCSS":".image-card-effect-1-main{\n margin: 1rem;\n\n position: relative;\n width: 34rem;\n height: 50rem;\n overflow: hidden;\n}\n.image-card-effect-1-bgimage{\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n}\n.image-card-effect-1-info{\n color: hsl(0, 0%, 90%);\n position: absolute;\n bottom: 40px;\n left: 30px;\n}\n.image-card-effect-1-heading{\n font-size: 4rem;\n letter-spacing: 2px;\n text-transform: uppercase;\n opacity: .8;\n font-weight: 900;\n}\n.image-card-effect-1-text{\n font-size: 1.6rem;\n opacity: .6;\n padding-left: 1rem;\n}\n.image-card-effect-1 .image-card-effect-1-bgimage{\n transform: scale(.9);\n transition: .4s;\n}\n.image-card-effect-1:hover .image-card-effect-1-bgimage{\n transform: scale(1);\n}"} -->
<div class="wp-block-column image-card-effect-3-main image-card-effect-3 ticss-346a63e5"><!-- wp:image {"align":"center","id":156,"sizeSlug":"large","linkDestination":"none","style":{"border":{"radius":"20px"},"color":{"duotone":["#050505","#de1414"]}},"className":"image-card-effect-3-bgimage is-style-rounded"} -->
<figure class="wp-block-image aligncenter size-large has-custom-border image-card-effect-3-bgimage is-style-rounded"><img src="https://csscrafter.com/wp-content/uploads/2023/08/dark_rider-cover-682x1024.jpg" alt="" class="wp-image-156" style="border-radius:20px"/></figure>
<!-- /wp:image -->
<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"className":"image-card-effect-3-info ticss-3f2cf579","hasCustomCSS":true,"customCSS":"\n"} -->
<div class="wp-block-column image-card-effect-3-info ticss-3f2cf579"><!-- wp:heading {"style":{"spacing":{"margin":{"top":"0","bottom":"0"}}},"className":"image-card-effect-3-heading ticss-9c6eae42","hasCustomCSS":true,"customCSS":".image-card-effect-3-heading {\npadding-right:40px;\n}\n"} -->
<h2 class="wp-block-heading image-card-effect-3-heading ticss-9c6eae42" id="image-hover-effect-1" style="margin-top:0;margin-bottom:0">Hero</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"className":"image-card-effect-3-text ticss-3b7bc039","hasCustomCSS":true,"customCSS":".image-card-effect-3-text {\n padding-right:40px!important;\n}\n"} -->
<p class="image-card-effect-3-text ticss-3b7bc039">Image Hover Effect 3 by CSScrafter</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->You will need Block CSS plugin by Themeisle to get the exact block syle.
If you need only the CSS code here it is ↓
.image-card-effect-3-main{
margin: 1rem;
position: relative;
width: 34rem;
height: 50rem;
overflow: hidden;
}
.image-card-effect-3-bgimage{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.image-card-effect-3-info{
color: hsl(0, 0%, 90%);
position: absolute;
bottom: 40px;
left: 5px;
}
.image-card-effect-3-heading{
font-size: 4rem;
letter-spacing: 2px;
text-transform: uppercase;
opacity: .8;
font-weight: 900;
padding-left:10px;
}
.image-card-effect-3-text{
font-size: 1.6rem;
opacity: .6;
padding-left: 1rem;
}
.image-card-effect-3 .image-card-effect-3-heading{
position: relative;
color: hsla(0, 0%, 90%, .5);
}
.image-card-effect-3 .image-card-effect-2-heading span {
color: hsl(0, 0%, 90%);
position: absolute;
right: 0;
top: 0;
opacity: 0;
transform: scale(1.4);
transition: .5s;
}
.image-card-effect-3:hover .image-card-effect-3-heading span {
opacity: 1;
transform: scale(1);
}
.image-card-effect-3 .image-card-effect-3-info{
text-align: right;
right: 30px;
left: unset;
}
.image-card-effect-3 .image-card-effect-3-text{
padding-left: 0;
padding-right: 1rem;
}
.image-card-effect-3 .image-card-effect-3-bgimage{
transition: .5s;
}
.image-card-effect-3 .image-card-effect-3-bgimage{
transform: scale(.9);
}Image Card Effect with Hover Color Invert Effect –
Field
Image Hover Effect 4 by CSScrafter
To get the Block or CSS, click here ⥅
Copy the Block from and paste in your editor ↓
<!-- wp:columns {"className":"ticss-a04776e9","hasCustomCSS":true,"customCSS":".image-card-effect-4-main{\n margin: 1rem;\n\n position: relative;\n width: 34rem;\n height:34rem;\n overflow: hidden;\n}\n.image-card-effect-4-bgimage{\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n}\n.image-card-effect-4-info{\n color: hsl(0, 0%, 90%);\n position: absolute;\n \n bottom: 60px;\n left: 5px;\n}\n.image-card-effect-4-heading{\n font-size: 4rem;\n letter-spacing: 2px;\n text-transform: uppercase;\n opacity: .8;\n font-weight: 900;\n padding-left:10px;\n}\n.image-card-effect-4-text{\n font-size: 1.6rem;\n opacity: .9;\n padding-left: .5rem;\n}\n.image-card-effect-4 {\n display: block;\n width: 100%;\n max-width: 80rem;\n}\n.image-card-effect-4 .image-card-effect-4-bgimage{\ntransition: .8s;\n}\n.image-card-effect-4:hover .image-card-effect-4-bgimage{\n filter: saturate(0);\n}\n.image-card-effect-4 .image-card-effect-4-heading{\n transition: .9s;\n}\n.image-card-effect-4:hover .image-card-effect-4-heading{\n color: hsl(194, 93%, 52%);\n}\n"} -->
<div class="wp-block-columns ticss-a04776e9"><!-- wp:column {"className":"image-card-effect-4-main image-card-effect-4 ticss-346a63e5","hasCustomCSS":true,"customCSS":".image-card-effect-1-main{\n margin: 1rem;\n\n position: relative;\n width: 34rem;\n height: 50rem;\n overflow: hidden;\n}\n.image-card-effect-1-bgimage{\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n}\n.image-card-effect-1-info{\n color: hsl(0, 0%, 90%);\n position: absolute;\n bottom: 40px;\n left: 30px;\n}\n.image-card-effect-1-heading{\n font-size: 4rem;\n letter-spacing: 2px;\n text-transform: uppercase;\n opacity: .8;\n font-weight: 900;\n}\n.image-card-effect-1-text{\n font-size: 1.6rem;\n opacity: .6;\n padding-left: 1rem;\n}\n.image-card-effect-1 .image-card-effect-1-bgimage{\n transform: scale(.9);\n transition: .4s;\n}\n.image-card-effect-1:hover .image-card-effect-1-bgimage{\n transform: scale(1);\n}"} -->
<div class="wp-block-column image-card-effect-4-main image-card-effect-4 ticss-346a63e5"><!-- wp:image {"align":"center","id":154,"sizeSlug":"full","linkDestination":"none","style":{"border":{"radius":"20px"},"color":{"duotone":"unset"}},"className":"image-card-effect-4-bgimage is-style-rounded"} -->
<figure class="wp-block-image aligncenter size-full has-custom-border image-card-effect-4-bgimage is-style-rounded"><img src="https://csscrafter.com/wp-content/uploads/2023/08/lavender-field.jpg" alt="lavender-field" class="wp-image-154" style="border-radius:20px"/></figure>
<!-- /wp:image -->
<!-- wp:columns {"className":"ticss-6f109aad","hasCustomCSS":true,"customCSS":".image-card-effect-4-info{\n margin-top:-150px!important;\n}\n"} -->
<div class="wp-block-columns ticss-6f109aad"><!-- wp:column {"className":"image-card-effect-4-info ticss-3f2cf579","hasCustomCSS":true,"customCSS":"\n"} -->
<div class="wp-block-column image-card-effect-4-info ticss-3f2cf579"><!-- wp:heading {"style":{"spacing":{"margin":{"top":"0","bottom":"0"}}},"className":"image-card-effect-4-heading ticss-9c6eae42","hasCustomCSS":true,"customCSS":"\n"} -->
<h2 class="wp-block-heading image-card-effect-4-heading ticss-9c6eae42" id="image-hover-effect-1" style="margin-top:0;margin-bottom:0">Field</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"className":"image-card-effect-4-text ticss-3b7bc039","hasCustomCSS":true,"customCSS":".image-card-effect-3-text {\n padding-right:40px!important;\n}\n"} -->
<p class="image-card-effect-4-text ticss-3b7bc039">Image Hover Effect 4 by CSScrafter</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->You will need Block CSS plugin by Themeisle to get the exact block syle.
If you need only the CSS code here it is ↓
.image-card-effect-4-main{
margin: 1rem;
position: relative;
width: 34rem;
height:34rem;
overflow: hidden;
}
.image-card-effect-4-bgimage{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.image-card-effect-4-info{
color: hsl(0, 0%, 90%);
position: absolute;
bottom: 60px;
left: 5px;
}
.image-card-effect-4-heading{
font-size: 4rem;
letter-spacing: 2px;
text-transform: uppercase;
opacity: .8;
font-weight: 900;
padding-left:10px;
}
.image-card-effect-4-text{
font-size: 1.6rem;
opacity: .9;
padding-left: .5rem;
}
.image-card-effect-4 {
display: block;
width: 100%;
max-width: 80rem;
}
.image-card-effect-4 .image-card-effect-4-bgimage{
transition: .8s;
}
.image-card-effect-4:hover .image-card-effect-4-bgimage{
filter: saturate(0);
}
.image-card-effect-4 .image-card-effect-4-heading{
transition: .9s;
}
.image-card-effect-4:hover .image-card-effect-4-heading{
color: hsl(194, 93%, 52%);
}
Image Card with Hover Text And Button Reveal Effect –
Card Title
To get the Block or CSS, click here ⥅
Copy the Block from and paste in your editor ↓
<!-- wp:columns {"className":"ticss-37764ea7","hasCustomCSS":true,"customCSS":".card-hover-container:hover .card-hover-title{\n top:50px;\nbottom: 0px;\n}\n.card-hover-button{\n opacity: 0;\n transition: opacity .35s ease;\n}\n.card-hover-container:hover .card-hover-button{\n opacity: 1;\n}\n.card-hover-container:hover .card-hover-overlay{\n display: block;\n background: rgba(0, 0, 0, .3);\n}\n"} -->
<div class="wp-block-columns ticss-37764ea7"><!-- wp:column {"className":"card-hover-container ","hasCustomCSS":true,"customCSS":"\n"} -->
<div class="wp-block-column card-hover-container"><!-- wp:cover {"url":"https://csscrafter.com/wp-content/uploads/2023/08/What-is-landscape-photography.jpg","id":151,"dimRatio":40,"overlayColor":"basecolor","layout":{"type":"constrained"}} -->
<div class="wp-block-cover"><span aria-hidden="true" class="wp-block-cover__background has-basecolor-background-color has-background-dim-40 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-151" alt="What-is-landscape-photography" src="https://csscrafter.com/wp-content/uploads/2023/08/What-is-landscape-photography.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:heading {"textAlign":"center","style":{"spacing":{"margin":{"top":"var:preset|spacing|30","bottom":"0"}},"typography":{"textTransform":"uppercase","fontSize":"60px"}},"backgroundColor":"textonprimary","className":"card-hover-title is-style-gradientmask","hasCustomCSS":true,"customCSS":"\n"} -->
<h2 class="wp-block-heading has-text-align-center card-hover-title is-style-gradientmask has-textonprimary-background-color has-background" id="image-hover-effect-1" style="margin-top:var(--wp--preset--spacing--30);margin-bottom:0;font-size:60px;text-transform:uppercase">Card Title</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center","className":"card-hover-button"} -->
<p class="has-text-align-center card-hover-button">Created by CSScrafter</p>
<!-- /wp:paragraph -->
<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons"><!-- wp:button {"textAlign":"center","textColor":"contrastcolor","width":25,"className":"is-style-outline card-hover-button"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-25 is-style-outline card-hover-button"><a class="wp-block-button__link has-contrastcolor-color has-text-color has-text-align-center wp-element-button" href="#">Button →</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->You will need Block CSS plugin by Themeisle to get the exact block syle.
If you need only the CSS code here it is ↓
.card-hover-container:hover .card-hover-title{
top:50px;
bottom: 0px;
}
.card-hover-button{
opacity: 0;
transition: opacity .35s ease;
}
.card-hover-container:hover .card-hover-button{
opacity: 1;
}
.card-hover-container:hover .card-hover-overlay{
display: block;
background: rgba(0, 0, 0, .3);
}
Stack Image Card with Hover Effect –
To get the Block or CSS, click here ⥅
Copy the Block from and paste in your editor ↓
(PS: The backend will not show the real effect, style will be perfect in the frontend)
<!-- wp:columns {"verticalAlignment":null,"style":{"spacing":{"padding":{"right":"var:preset|spacing|80","left":"var:preset|spacing|80"},"blockGap":{"left":"0"}}},"className":"ticss-37764ea7","hasCustomCSS":true,"customCSS":".card-hover-container:hover .card-hover-title{\n top:50px;\nbottom: 0px;\n}\n.card-hover-button{\n opacity: 0;\n transition: opacity .35s ease;\n}\n.card-hover-container:hover .card-hover-button{\n opacity: 1;\n}\n.card-hover-container:hover .card-hover-overlay{\n display: block;\n background: rgba(0, 0, 0, .3);\n}\n"} -->
<div class="wp-block-columns ticss-37764ea7" style="padding-right:var(--wp--preset--spacing--80);padding-left:var(--wp--preset--spacing--80)"><!-- wp:column {"verticalAlignment":"center","style":{"spacing":{"padding":{"right":"var:preset|spacing|80","left":"var:preset|spacing|80"}}},"className":" ticss-7a1f73e9","hasCustomCSS":true,"customCSS":"\n"} -->
<div class="wp-block-column is-vertically-aligned-center ticss-7a1f73e9" style="padding-right:var(--wp--preset--spacing--80);padding-left:var(--wp--preset--spacing--80)"><!-- wp:group {"className":"stack-image-card ticss-1dbe30ab","layout":{"type":"constrained","justifyContent":"center"},"hasCustomCSS":true,"customCSS":"\n.stack-image-card{\n position: relative;\n width: 360px;\n height: 300px;\n background: rgba(0, 0, 0, 0);\n transform: rotate(-30deg) skew(25deg) scale(0.8);\n transition: 0.5s;\n}\n.stack-image-card-img{\n position: absolute;\n width: 100%;\n transition: 0.5s;\n}\n\n.stack-image-card:hover .stack-image-card-img:nth-child(4) {\n transform: translate(160px, -160px);\n opacity: 1;\n}\n.stack-image-card:hover .stack-image-card-img:nth-child(3){\n transform: translate(120px, -120px);\n opacity: 0.8;\n}\n.stack-image-card:hover .stack-image-card-img:nth-child(2){\n transform: translate(80px, -80px);\n opacity: 0.6;\n}\n.stack-image-card:hover .stack-image-card-img:nth-child(1){\n transform: translate(40px, -40px);\n opacity: 0.4;\n}"} -->
<div class="wp-block-group stack-image-card ticss-1dbe30ab"><!-- wp:image {"align":"center","id":"gsbp-68f5797c-1748","sizeSlug":"medium","linkDestination":"none","className":"stack-image-card-img stack-image-card-img-1"} -->
<figure class="wp-block-image aligncenter size-medium stack-image-card-img stack-image-card-img-1"><img src="https://csscrafter.com/wp-content/uploads/2023/09/ios16-iphone13-pro-home-screen-make-folder-148x300.png" alt="" class="wp-image-gsbp-68f5797c-1748"/></figure>
<!-- /wp:image -->
<!-- wp:image {"align":"center","id":"gsbp-68f5797c-1748","sizeSlug":"medium","linkDestination":"none","className":"stack-image-card-img stack-image-card-img-2"} -->
<figure class="wp-block-image aligncenter size-medium stack-image-card-img stack-image-card-img-2"><img src="https://csscrafter.com/wp-content/uploads/2023/09/ios16-iphone13-pro-home-screen-make-folder-148x300.png" alt="" class="wp-image-gsbp-68f5797c-1748"/></figure>
<!-- /wp:image -->
<!-- wp:image {"align":"center","id":"gsbp-68f5797c-1748","sizeSlug":"medium","linkDestination":"none","className":"stack-image-card-img stack-image-card-img-3"} -->
<figure class="wp-block-image aligncenter size-medium stack-image-card-img stack-image-card-img-3"><img src="https://csscrafter.com/wp-content/uploads/2023/09/ios16-iphone13-pro-home-screen-make-folder-148x300.png" alt="" class="wp-image-gsbp-68f5797c-1748"/></figure>
<!-- /wp:image -->
<!-- wp:image {"align":"center","id":"gsbp-68f5797c-1748","sizeSlug":"medium","linkDestination":"none","className":"stack-image-card-img stack-image-card-img-4"} -->
<figure class="wp-block-image aligncenter size-medium stack-image-card-img stack-image-card-img-4"><img src="https://csscrafter.com/wp-content/uploads/2023/09/ios16-iphone13-pro-home-screen-make-folder-148x300.png" alt="" class="wp-image-gsbp-68f5797c-1748"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->You will need Block CSS plugin by Themeisle to get the exact block syle.
If you need only the CSS code here it is ↓
.stack-image-card{
position: relative;
width: 360px;
height: 300px;
background: rgba(0, 0, 0, 0);
transform: rotate(-30deg) skew(25deg) scale(0.8);
transition: 0.5s;
}
.stack-image-card-img{
position: absolute;
width: 100%;
transition: 0.5s;
}
.stack-image-card:hover .stack-image-card-img:nth-child(4) {
transform: translate(160px, -160px);
opacity: 1;
}
.stack-image-card:hover .stack-image-card-img:nth-child(3){
transform: translate(120px, -120px);
opacity: 0.8;
}
.stack-image-card:hover .stack-image-card-img:nth-child(2){
transform: translate(80px, -80px);
opacity: 0.6;
}
.stack-image-card:hover .stack-image-card-img:nth-child(1){
transform: translate(40px, -40px);
opacity: 0.4;
}3d Flip Box Card in Hover Style –
Heading
CSScrafter CSS 3d Flipbox
Heading
CSScrafter CSS 3d Flipbox
To get the Block or CSS, click here ⥅
Copy the Block from and paste in your editor ↓
<!-- wp:column {"className":"ticss-f66df095","hasCustomCSS":true,"customCSS":".flip-box-1 {\n background-color: transparent;\n perspective: 1000px;\n width: 300px;\n height: 500px;\n}\n.flip-box-1-inner {\n position: relative;\n width: 100%;\n height: 100%;\n text-align: center;\n transition: transform 0.8s;\n transform-style: preserve-3d;\n}\n.flip-box-1:hover .flip-box-1-inner {\n transform: rotateY(180deg);\n cursor:pointer;\n}\n.flip-box-1-front, .flip-box-1-back {\n position: absolute;\n width: 100%;\n height: 100%;\n -webkit-backface-visibility: hidden;\n backface-visibility: hidden;\n \n}\n.flip-box-1-front {\n background-color: transparent;\n}\n.flip-box-1-back {\n background-color: transparent;\n transform: rotateY(180deg);\n}\n.flip-box-cover{\n box-shadow: 0 8px 8px -4px lightblue;\n}\n.flip-box-cover-2{\n box-shadow: 0 8px 8px -4px aquamarine;\n}\n"} -->
<div class="wp-block-column ticss-f66df095" id="flip-box-1"><!-- wp:columns {"className":"flip-box-1-inner"} -->
<div class="wp-block-columns flip-box-1-inner"><!-- wp:column {"className":"flip-box-1-front"} -->
<div class="wp-block-column flip-box-1-front"><!-- wp:cover {"url":"https://csscrafter.com/wp-content/uploads/2023/09/400.jpeg","id":354,"dimRatio":50,"style":{"border":{"radius":"20px"}},"className":"flip-box-cover","layout":{"type":"constrained"}} -->
<div class="wp-block-cover flip-box-cover" style="border-radius:20px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span><img class="wp-block-cover__image-background wp-image-354" alt="Image card image" src="https://csscrafter.com/wp-content/uploads/2023/09/400.jpeg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size">Heading</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">CSScrafter CSS 3d Flipbox</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:column -->
<!-- wp:column {"className":"flip-box-1-back"} -->
<div class="wp-block-column flip-box-1-back"><!-- wp:cover {"url":"https://csscrafter.com/wp-content/uploads/2023/08/inside-deep-mystical-jungle-canyon-can-be-used-as-background-wallpaper-inside-deep-mystical-jungle-canyon-141652062.webp","id":152,"dimRatio":50,"style":{"border":{"radius":"20px"}},"className":"flip-box-cover-2","layout":{"type":"constrained"}} -->
<div class="wp-block-cover flip-box-cover-2" style="border-radius:20px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span><img class="wp-block-cover__image-background wp-image-152" alt="" src="https://csscrafter.com/wp-content/uploads/2023/08/inside-deep-mystical-jungle-canyon-can-be-used-as-background-wallpaper-inside-deep-mystical-jungle-canyon-141652062.webp" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size">Heading</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">CSScrafter CSS 3d Flipbox</p>
<!-- /wp:paragraph -->
<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons"><!-- wp:button {"textColor":"button","className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-button-color has-text-color wp-element-button" href="#">Visit now</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:column -->You will need Block CSS plugin by Themeisle to get the exact block syle.
If you need only the CSS code here it is ↓
.flip-box-1 {
background-color: transparent;
perspective: 1000px;
width: 300px;
height: 500px;
}
.flip-box-1-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip-box-1:hover .flip-box-1-inner {
transform: rotateY(180deg);
cursor:pointer;
}
.flip-box-1-front, .flip-box-1-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-box-1-front {
background-color: transparent;
}
.flip-box-1-back {
background-color: transparent;
transform: rotateY(180deg);
}
.flip-box-cover{
box-shadow: 0 8px 8px -4px lightblue;
}
.flip-box-cover-2{
box-shadow: 0 8px 8px -4px aquamarine;
}
CSS credit – w3School
Multi Shadow Card Style –
Card with Multi Shadow
CSScrafter is here for you to create various items with Shadow
To get the Block or CSS, click here ⥅
Copy the Block from and paste in your editor ↓
<!-- wp:column {"verticalAlignment":"center","style":{"spacing":{"padding":{"right":"var:preset|spacing|80","left":"var:preset|spacing|80"}}},"className":" ticss-7a1f73e9 card-multi-shadow","hasCustomCSS":true,"customCSS":".card-multi-shadow{\n margin:0px;\n background:#10172A;\n padding-right:0px!important;\n padding-left:0px!important;\n padding-bottom:20px;\n\t\theight: 100%;\n border-bottom-width: 10px!important;\n border-color: red!important;\n border-radius:10px;\n box-shadow: 5px 5px 5px white, 2px 10px 5px yellow;\n}\n.card-multi-shadow-image{\n overflow:hidden;\n border-radius:10px!important;\n width:100%;\n margin:0px;\n \nclip-path: polygon(0% 0%, 0% 82.5%, 1.69492% 84.3293%, 3.38983% 86.1385%, 5.08475% 87.9078%, 6.77966% 89.6179%, 8.47458% 91.25%, 10.1695% 92.7862%, 11.8644% 94.2098%, 13.5593% 95.505%, 15.2542% 96.6578%, 16.9492% 97.6555%, 18.6441% 98.487%, 20.339% 99.1435%, 22.0339% 99.6176%, 23.7288% 99.9041%, 25.4237% 100%, 27.1186% 99.9041%, 28.8136% 99.6176%, 30.5085% 99.1435%, 32.2034% 98.487%, 33.8983% 97.6555%, 35.5932% 96.6578%, 37.2881% 95.505%, 38.9831% 94.2098%, 40.678% 92.7862%, 42.3729% 91.25%, 44.0678% 89.6179%, 45.7627% 87.9078%, 47.4576% 86.1385%, 49.1525% 84.3293%, 50.8475% 82.5%, 52.5424% 80.6708%, 54.2373% 78.8616%, 55.9322% 77.0922%, 57.6271% 75.3821%, 59.322% 73.75%, 61.017% 72.2138%, 62.7119% 70.7902%, 64.4068% 69.495%, 66.1017% 68.3422%, 67.7966% 67.3446%, 69.4915% 66.513%, 71.1864% 65.8565%, 72.8814% 65.3824%, 74.5763% 65.0959%, 76.2712% 65%, 77.9661% 65.0959%, 79.661% 65.3824%, 81.3559% 65.8565%, 83.0509% 66.513%, 84.7458% 67.3446%, 86.4407% 68.3422%, 88.1356% 69.495%, 89.8305% 70.7902%, 91.5254% 72.2138%, 93.2203% 73.75%, 94.9153% 75.3821%, 96.6102% 77.0922%, 98.3051% 78.8616%, 100% 80.6708%, 100% 0%); shape-outside: polygon(0% 0%, 0% 82.5%, 1.69492% 84.3293%, 3.38983% 86.1385%, 5.08475% 87.9078%, 6.77966% 89.6179%, 8.47458% 91.25%, 10.1695% 92.7862%, 11.8644% 94.2098%, 13.5593% 95.505%, 15.2542% 96.6578%, 16.9492% 97.6555%, 18.6441% 98.487%, 20.339% 99.1435%, 22.0339% 99.6176%, 23.7288% 99.9041%, 25.4237% 100%, 27.1186% 99.9041%, 28.8136% 99.6176%, 30.5085% 99.1435%, 32.2034% 98.487%, 33.8983% 97.6555%, 35.5932% 96.6578%, 37.2881% 95.505%, 38.9831% 94.2098%, 40.678% 92.7862%, 42.3729% 91.25%, 44.0678% 89.6179%, 45.7627% 87.9078%, 47.4576% 86.1385%, 49.1525% 84.3293%, 50.8475% 82.5%, 52.5424% 80.6708%, 54.2373% 78.8616%, 55.9322% 77.0922%, 57.6271% 75.3821%, 59.322% 73.75%, 61.017% 72.2138%, 62.7119% 70.7902%, 64.4068% 69.495%, 66.1017% 68.3422%, 67.7966% 67.3446%, 69.4915% 66.513%, 71.1864% 65.8565%, 72.8814% 65.3824%, 74.5763% 65.0959%, 76.2712% 65%, 77.9661% 65.0959%, 79.661% 65.3824%, 81.3559% 65.8565%, 83.0509% 66.513%, 84.7458% 67.3446%, 86.4407% 68.3422%, 88.1356% 69.495%, 89.8305% 70.7902%, 91.5254% 72.2138%, 93.2203% 73.75%, 94.9153% 75.3821%, 96.6102% 77.0922%, 98.3051% 78.8616%, 100% 80.6708%, 100% 0%)\n \n}\n.card-multi-shadow-content{\npadding-right:20px!important;\n padding-left:20px!important;\n}"} -->
<div class="wp-block-column is-vertically-aligned-center ticss-7a1f73e9 card-multi-shadow" style="padding-right:var(--wp--preset--spacing--80);padding-left:var(--wp--preset--spacing--80)"><!-- wp:image {"id":154,"sizeSlug":"full","linkDestination":"none","className":"card-multi-shadow-image"} -->
<figure class="wp-block-image size-full card-multi-shadow-image"><img src="https://csscrafter.com/wp-content/uploads/2023/08/lavender-field.jpg" alt="lavender-field" class="wp-image-154"/></figure>
<!-- /wp:image -->
<!-- wp:group {"className":"card-multi-shadow-content","layout":{"type":"constrained"}} -->
<div class="wp-block-group card-multi-shadow-content"><!-- wp:heading -->
<h2 class="wp-block-heading" id="card-with-multi-shadow">Card with Multi Shadow</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>CSScrafter is here for you to create various items with Shadow</p>
<!-- /wp:paragraph -->
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"textColor":"button","className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-button-color has-text-color wp-element-button" href="#">Visit Now →</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->You will need Block CSS plugin by Themeisle to get the exact block syle.
If you need only the CSS code here it is ↓
.card-multi-shadow{
margin:0px;
background:#10172A;
padding-right:0px!important;
padding-left:0px!important;
padding-bottom:20px;
height: 100%;
border-bottom-width: 10px!important;
border-color: red!important;
border-radius:10px;
box-shadow: 5px 5px 5px white, 2px 10px 5px yellow;
}
.card-multi-shadow-image{
overflow:hidden;
border-radius:10px!important;
width:100%;
margin:0px;
clip-path: polygon(0% 0%, 0% 82.5%, 1.69492% 84.3293%, 3.38983% 86.1385%, 5.08475% 87.9078%, 6.77966% 89.6179%, 8.47458% 91.25%, 10.1695% 92.7862%, 11.8644% 94.2098%, 13.5593% 95.505%, 15.2542% 96.6578%, 16.9492% 97.6555%, 18.6441% 98.487%, 20.339% 99.1435%, 22.0339% 99.6176%, 23.7288% 99.9041%, 25.4237% 100%, 27.1186% 99.9041%, 28.8136% 99.6176%, 30.5085% 99.1435%, 32.2034% 98.487%, 33.8983% 97.6555%, 35.5932% 96.6578%, 37.2881% 95.505%, 38.9831% 94.2098%, 40.678% 92.7862%, 42.3729% 91.25%, 44.0678% 89.6179%, 45.7627% 87.9078%, 47.4576% 86.1385%, 49.1525% 84.3293%, 50.8475% 82.5%, 52.5424% 80.6708%, 54.2373% 78.8616%, 55.9322% 77.0922%, 57.6271% 75.3821%, 59.322% 73.75%, 61.017% 72.2138%, 62.7119% 70.7902%, 64.4068% 69.495%, 66.1017% 68.3422%, 67.7966% 67.3446%, 69.4915% 66.513%, 71.1864% 65.8565%, 72.8814% 65.3824%, 74.5763% 65.0959%, 76.2712% 65%, 77.9661% 65.0959%, 79.661% 65.3824%, 81.3559% 65.8565%, 83.0509% 66.513%, 84.7458% 67.3446%, 86.4407% 68.3422%, 88.1356% 69.495%, 89.8305% 70.7902%, 91.5254% 72.2138%, 93.2203% 73.75%, 94.9153% 75.3821%, 96.6102% 77.0922%, 98.3051% 78.8616%, 100% 80.6708%, 100% 0%); shape-outside: polygon(0% 0%, 0% 82.5%, 1.69492% 84.3293%, 3.38983% 86.1385%, 5.08475% 87.9078%, 6.77966% 89.6179%, 8.47458% 91.25%, 10.1695% 92.7862%, 11.8644% 94.2098%, 13.5593% 95.505%, 15.2542% 96.6578%, 16.9492% 97.6555%, 18.6441% 98.487%, 20.339% 99.1435%, 22.0339% 99.6176%, 23.7288% 99.9041%, 25.4237% 100%, 27.1186% 99.9041%, 28.8136% 99.6176%, 30.5085% 99.1435%, 32.2034% 98.487%, 33.8983% 97.6555%, 35.5932% 96.6578%, 37.2881% 95.505%, 38.9831% 94.2098%, 40.678% 92.7862%, 42.3729% 91.25%, 44.0678% 89.6179%, 45.7627% 87.9078%, 47.4576% 86.1385%, 49.1525% 84.3293%, 50.8475% 82.5%, 52.5424% 80.6708%, 54.2373% 78.8616%, 55.9322% 77.0922%, 57.6271% 75.3821%, 59.322% 73.75%, 61.017% 72.2138%, 62.7119% 70.7902%, 64.4068% 69.495%, 66.1017% 68.3422%, 67.7966% 67.3446%, 69.4915% 66.513%, 71.1864% 65.8565%, 72.8814% 65.3824%, 74.5763% 65.0959%, 76.2712% 65%, 77.9661% 65.0959%, 79.661% 65.3824%, 81.3559% 65.8565%, 83.0509% 66.513%, 84.7458% 67.3446%, 86.4407% 68.3422%, 88.1356% 69.495%, 89.8305% 70.7902%, 91.5254% 72.2138%, 93.2203% 73.75%, 94.9153% 75.3821%, 96.6102% 77.0922%, 98.3051% 78.8616%, 100% 80.6708%, 100% 0%)
}
.card-multi-shadow-content{
padding-right:20px!important;
padding-left:20px!important;
}CSS credit – CSScrafter
Team Member Card Style –
Gobinda Tarafdar
Founder of CSScrafter
CSScrafter is here for you to create various items with CSS and Gutenberg Blocks.
To get the Block or CSS, click here ⥅
Copy the Block from and paste in your editor ↓
<!-- wp:column {"verticalAlignment":"center","style":{"spacing":{"padding":{"right":"var:preset|spacing|80","left":"var:preset|spacing|80"}}},"className":" ticss-7a1f73e9 team-member-card","hasCustomCSS":true,"customCSS":".team-member-card{\n background:#10172A;\n padding-right:0px!important;\n padding-left:0px!important;\npadding-bottom:20px;\n padding-top:20px;\n border-radius:10px;\n box-shadow: 2px 2px 1px 2px #FF8549;\n}\n.team-member-card-image{\n width:50%;\n margin:0px;\n clip-path: circle(50% at 50% 50%);\n}\n.team-member-card-content{\npadding-right:40px!important;\n padding-left:40px!important;\n}"} -->
<div class="wp-block-column is-vertically-aligned-center ticss-7a1f73e9 team-member-card" style="padding-right:var(--wp--preset--spacing--80);padding-left:var(--wp--preset--spacing--80)"><!-- wp:image {"align":"center","id":245,"sizeSlug":"full","linkDestination":"none","className":"team-member-card-image"} -->
<figure class="wp-block-image aligncenter size-full team-member-card-image"><img src="https://csscrafter.com/wp-content/uploads/2023/08/head-readbg-Gtarafdar.png" alt="head-readbg-Gtarafdar" class="wp-image-245"/></figure>
<!-- /wp:image -->
<!-- wp:group {"className":"team-member-card-content","layout":{"type":"constrained"}} -->
<div class="wp-block-group team-member-card-content"><!-- wp:heading {"textAlign":"center"} -->
<h2 class="wp-block-heading has-text-align-center" id="card-with-multi-shadow">Gobinda Tarafdar</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center","style":{"typography":{"fontSize":"15px"}},"textColor":"lightgrey"} -->
<p class="has-text-align-center has-lightgrey-color has-text-color" style="font-size:15px">Founder of CSScrafter</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">CSScrafter is here for you to create various items with CSS and Gutenberg Blocks.</p>
<!-- /wp:paragraph -->
<!-- wp:social-links {"iconColor":"textonprimary","iconColorValue":"#fffffd","iconBackgroundColor":"custom-dark-blue-2","iconBackgroundColorValue":"#0f172a","layout":{"type":"flex","justifyContent":"center"}} -->
<ul class="wp-block-social-links has-icon-color has-icon-background-color"><!-- wp:social-link {"url":"https://twitter.com/Gtarafdarr","service":"twitter"} /-->
<!-- wp:social-link {"url":"https://www.facebook.com/gobinda.tarafdar","service":"facebook"} /-->
<!-- wp:social-link {"url":"https://www.linkedin.com/in/gobinda-tarafdar/","service":"linkedin"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->You will need Block CSS plugin by Themeisle to get the exact block syle.
If you need only the CSS code here it is ↓
.team-member-card{
background:#10172A;
padding-right:0px!important;
padding-left:0px!important;
padding-bottom:20px;
padding-top:20px;
border-radius:10px;
box-shadow: 2px 2px 1px 2px #FF8549;
}
.team-member-card-image{
width:50%;
margin:0px;
clip-path: circle(50% at 50% 50%);
}
.team-member-card-content{
padding-right:40px!important;
padding-left:40px!important;
}CSS credit – CSScrafter
Testimonial Card Style –
CSScrafter is here for you to create various items with CSS and Gutenberg Blocks. You will find interesting readymade blocks for your website. Keep visiting here.
To get the Block or CSS, click here ⥅
Copy the Block from and paste in your editor ↓
<!-- wp:column {"verticalAlignment":"center","style":{"spacing":{"padding":{"right":"var:preset|spacing|80","left":"var:preset|spacing|80"}}},"className":" ticss-7a1f73e9 testimonial-card-1","hasCustomCSS":true,"customCSS":".testimonial-card-1{\n background:#10172A;\n padding-right:0px!important;\n padding-left:0px!important;\npadding-bottom:20px;\n padding-top:20px;\n border-radius:10px;\n box-shadow: 2px 2px 1px 2px #FF8549;\n}\n.testimonial-card-1-image{\n width:50%;\n margin:0px;\n clip-path: circle(50% at 50% 50%);\n}\n.testimonial-card-1-content{\npadding-right:40px!important;\n padding-left:40px!important;\n}\n.testimonial-card-1-author{\n margin-left:-40px!important;\n}\n.testimonial-card-1-name{\n padding-top:15px;\n}\n.testimonial-card-1-designation{\n margin-top:0px!important;\n}"} -->
<div class="wp-block-column is-vertically-aligned-center ticss-7a1f73e9 testimonial-card-1" style="padding-right:var(--wp--preset--spacing--80);padding-left:var(--wp--preset--spacing--80)"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"33.33%"} -->
<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:image {"align":"center","id":245,"width":92,"height":92,"sizeSlug":"full","linkDestination":"none","className":"testimonial-card-1-image"} -->
<figure class="wp-block-image aligncenter size-full is-resized testimonial-card-1-image"><img src="https://csscrafter.com/wp-content/uploads/2023/08/head-readbg-Gtarafdar.png" alt="head-readbg-Gtarafdar" class="wp-image-245" style="width:92px;height:92px" width="92" height="92"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->
<!-- wp:column {"width":"66.66%","className":"testimonial-card-1-author"} -->
<div class="wp-block-column testimonial-card-1-author" style="flex-basis:66.66%"><!-- wp:heading {"textAlign":"left","style":{"typography":{"fontSize":"20px"}},"className":"testimonial-card-1-name"} -->
<h2 class="wp-block-heading has-text-align-left testimonial-card-1-name" id="card-with-multi-shadow" style="font-size:20px">Gobinda Tarafdar</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"left","style":{"typography":{"fontSize":"15px"}},"textColor":"lightgrey","className":"testimonial-card-1-designation"} -->
<p class="has-text-align-left testimonial-card-1-designation has-lightgrey-color has-text-color" style="font-size:15px">Founder of CSScrafter</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- wp:paragraph {"align":"left","className":"testimonial-card-1-content"} -->
<p class="has-text-align-left testimonial-card-1-content">CSScrafter is here for you to create various items with CSS and Gutenberg Blocks. You will find interesting readymade blocks for your website. Keep visiting here.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->You will need Block CSS plugin by Themeisle to get the exact block syle.
If you need only the CSS code here it is ↓
.testimonial-card-1{
background:#10172A;
padding-right:0px!important;
padding-left:0px!important;
padding-bottom:20px;
padding-top:20px;
border-radius:10px;
box-shadow: 2px 2px 1px 2px #FF8549;
}
.testimonial-card-1-image{
width:50%;
margin:0px;
clip-path: circle(50% at 50% 50%);
}
.testimonial-card-1-content{
padding-right:40px!important;
padding-left:40px!important;
}
.testimonial-card-1-author{
margin-left:-40px!important;
}
.testimonial-card-1-name{
padding-top:15px;
}
.testimonial-card-1-designation{
margin-top:0px!important;
}CSS credit – CSScrafter
Testimonial Card Style 2 –
CSScrafter is here for you to create various items with CSS and Gutenberg Blocks. You will find interesting readymade blocks for your website. Keep visiting here.
To get the Block or CSS, click here ⥅
Copy the Block from and paste in your editor ↓
<!-- wp:column {"verticalAlignment":"center","style":{"spacing":{"padding":{"right":"var:preset|spacing|80","left":"var:preset|spacing|80"}}},"className":" ticss-7a1f73e9 testimonial-card-2","hasCustomCSS":true,"customCSS":".testimonial-card-2{\n background:white;\n padding-right:0px!important;\n padding-left:0px!important;\npadding-bottom:20px;\n padding-top:20px;\n border-radius:10px;\n\n border-left: solid 5px #FF8549 ;\n}\n.testimonial-card-2-image{\n width:50%;\n margin:0px;\n clip-path: circle(50% at 50% 50%);\n}\n.testimonial-card-2-content{\npadding-right:40px!important;\n padding-left:40px!important;\n}\n.testimonial-card-2-author{\n margin-left:-40px!important;\n}\n.testimonial-card-2-name{\n padding-top:15px!important;\n}\n.testimonial-card-2-designation{\n margin-top:0px!important;\n}"} -->
<div class="wp-block-column is-vertically-aligned-center ticss-7a1f73e9 testimonial-card-2" style="padding-right:var(--wp--preset--spacing--80);padding-left:var(--wp--preset--spacing--80)"><!-- wp:paragraph {"align":"left","textColor":"custom-dark-blue-2","className":"testimonial-card-2-content"} -->
<p class="has-text-align-left testimonial-card-2-content has-custom-dark-blue-2-color has-text-color">CSScrafter is here for you to create various items with CSS and Gutenberg Blocks. You will find interesting readymade blocks for your website. Keep visiting here.</p>
<!-- /wp:paragraph -->
<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"33.33%"} -->
<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:image {"align":"center","id":245,"width":92,"height":92,"sizeSlug":"full","linkDestination":"none","className":"testimonial-card-2-image"} -->
<figure class="wp-block-image aligncenter size-full is-resized testimonial-card-2-image"><img src="https://csscrafter.com/wp-content/uploads/2023/08/head-readbg-Gtarafdar.png" alt="head-readbg-Gtarafdar" class="wp-image-245" style="width:92px;height:92px" width="92" height="92"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->
<!-- wp:column {"width":"66.66%","className":"testimonial-card-2-author"} -->
<div class="wp-block-column testimonial-card-2-author" style="flex-basis:66.66%"><!-- wp:heading {"textAlign":"left","style":{"typography":{"fontSize":"20px"}},"textColor":"custom-dark-blue-2","className":"testimonial-card-2-name"} -->
<h2 class="wp-block-heading has-text-align-left testimonial-card-2-name has-custom-dark-blue-2-color has-text-color" id="card-with-multi-shadow" style="font-size:20px">Gobinda Tarafdar</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"left","style":{"typography":{"fontSize":"15px"}},"textColor":"lightgrey","className":"testimonial-card-2-designation"} -->
<p class="has-text-align-left testimonial-card-2-designation has-lightgrey-color has-text-color" style="font-size:15px">Founder of CSScrafter</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:column -->You will need Block CSS plugin by Themeisle to get the exact block syle.
If you need only the CSS code here it is ↓
.testimonial-card-2{
background:white;
padding-right:0px!important;
padding-left:0px!important;
padding-bottom:20px;
padding-top:20px;
border-radius:10px;
border-left: solid 5px #FF8549 ;
}
.testimonial-card-2-image{
width:50%;
margin:0px;
clip-path: circle(50% at 50% 50%);
}
.testimonial-card-2-content{
padding-right:40px!important;
padding-left:40px!important;
}
.testimonial-card-2-author{
margin-left:-40px!important;
}
.testimonial-card-2-name{
padding-top:15px!important;
}
.testimonial-card-2-designation{
margin-top:0px!important;
}CSS credit – CSScrafter
Testimonial Card Style 3 –
CSScrafter is here for you to create various items with CSS and Gutenberg Blocks. You will find interesting readymade blocks for your website.
//
To get the Block or CSS, click here ⥅
Copy the Block from and paste in your editor ↓
<!-- wp:column {"verticalAlignment":"center","style":{"spacing":{"padding":{"right":"var:preset|spacing|80","left":"var:preset|spacing|80"}}},"className":" ticss-7a1f73e9 testimonial-card-3","hasCustomCSS":true,"customCSS":".testimonial-card-3-image{\n width:100%;\n height:100%;\n margin:0px;\n /*clip-path: circle(50% at 50% 50%);*/\n}\n.testimonial-card-3-content{\npadding-right:20px!important;\n padding-left:20px!important;\n border-radius: 10px;\n-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 28% 86%, 18% 100%, 12% 85%, 0 85% );\nclip-path: polygon(0% 0%, 100% 0%, 100% 85%, 28% 86%, 18% 100%, 12% 85%, 0 85%);\n}\n.testimonial-card-3-author{\n margin-left:-20px!important;\n}\n.testimonial-card-3-name{\n padding-top:15px!important;\n}\n.testimonial-card-3-designation{\n margin-top:0px!important;\n}"} -->
<div class="wp-block-column is-vertically-aligned-center ticss-7a1f73e9 testimonial-card-3" style="padding-right:var(--wp--preset--spacing--80);padding-left:var(--wp--preset--spacing--80)"><!-- wp:paragraph {"align":"left","style":{"color":{"background":"#ff9c00"}},"textColor":"custom-dark-blue-2","className":"testimonial-card-3-content"} -->
<p class="has-text-align-left testimonial-card-3-content has-custom-dark-blue-2-color has-text-color has-background" style="background-color:#ff9c00">CSScrafter is here for you to create various items with CSS and Gutenberg Blocks. You will find interesting readymade blocks for your website. <br><mark style="background-color:rgba(0, 0, 0, 0);color:#ff9c00" class="has-inline-color">//</mark></p>
<!-- /wp:paragraph -->
<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"33.33%"} -->
<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:image {"align":"center","id":245,"width":92,"height":92,"sizeSlug":"full","linkDestination":"none","className":"testimonial-card-3-image"} -->
<figure class="wp-block-image aligncenter size-full is-resized testimonial-card-3-image"><img src="https://csscrafter.com/wp-content/uploads/2023/08/head-readbg-Gtarafdar.png" alt="head-readbg-Gtarafdar" class="wp-image-245" style="width:92px;height:92px" width="92" height="92"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->
<!-- wp:column {"width":"66.66%","className":"testimonial-card-3-author"} -->
<div class="wp-block-column testimonial-card-3-author" style="flex-basis:66.66%"><!-- wp:heading {"textAlign":"left","style":{"typography":{"fontSize":"20px"}},"textColor":"textonprimary","className":"testimonial-card-3-name"} -->
<h2 class="wp-block-heading has-text-align-left testimonial-card-3-name has-textonprimary-color has-text-color" id="card-with-multi-shadow" style="font-size:20px">Gobinda Tarafdar</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"left","style":{"typography":{"fontSize":"15px"}},"textColor":"lightgrey","className":"testimonial-card-3-designation"} -->
<p class="has-text-align-left testimonial-card-3-designation has-lightgrey-color has-text-color" style="font-size:15px">Founder of CSScrafter</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:column -->You will need Block CSS plugin by Themeisle to get the exact block syle.
If you need only the CSS code here it is ↓
.testimonial-card-3-image{
width:100%;
height:100%;
margin:0px;
/*clip-path: circle(50% at 50% 50%);*/
}
.testimonial-card-3-content{
padding-right:20px!important;
padding-left:20px!important;
border-radius: 10px;
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 28% 86%, 18% 100%, 12% 85%, 0 85% );
clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 28% 86%, 18% 100%, 12% 85%, 0 85%);
}
.testimonial-card-3-author{
margin-left:-20px!important;
}
.testimonial-card-3-name{
padding-top:15px!important;
}
.testimonial-card-3-designation{
margin-top:0px!important;
}CSS credit – CSScrafter
Product Card Style –
Card with Multi Shadow
USD 99
CSScrafter is here for you to create various items with Shadow
- CSS Blocks
- CSS Image
- CSS Cards
- CSS Particles
- CSS lists items
To get the Block or CSS, click here ⥅
Copy the Block from and paste in your editor ↓
<!-- wp:column {"verticalAlignment":"center","style":{"spacing":{"padding":{"right":"var:preset|spacing|80","left":"var:preset|spacing|80"}}},"className":" ticss-7a1f73e9 product-card","hasCustomCSS":true,"customCSS":".product-card{\n margin:0px;\n background:#10172A;\n padding-right:0px!important;\n padding-left:0px!important;\n padding-bottom:20px;\n\t\theight: 100%;\n border-bottom-width: 10px!important;\n border-color: red!important;\n border-radius:10px;\n box-shadow: 5px 5px 15px white;\n}\n.product-card-image{\n overflow:hidden;\n border-radius:10px!important;\n width:100%;\n margin:0px;\n \nclip-path: polygon(0% 0%, 0% 82.5%, 1.69492% 84.3293%, 3.38983% 86.1385%, 5.08475% 87.9078%, 6.77966% 89.6179%, 8.47458% 91.25%, 10.1695% 92.7862%, 11.8644% 94.2098%, 13.5593% 95.505%, 15.2542% 96.6578%, 16.9492% 97.6555%, 18.6441% 98.487%, 20.339% 99.1435%, 22.0339% 99.6176%, 23.7288% 99.9041%, 25.4237% 100%, 27.1186% 99.9041%, 28.8136% 99.6176%, 30.5085% 99.1435%, 32.2034% 98.487%, 33.8983% 97.6555%, 35.5932% 96.6578%, 37.2881% 95.505%, 38.9831% 94.2098%, 40.678% 92.7862%, 42.3729% 91.25%, 44.0678% 89.6179%, 45.7627% 87.9078%, 47.4576% 86.1385%, 49.1525% 84.3293%, 50.8475% 82.5%, 52.5424% 80.6708%, 54.2373% 78.8616%, 55.9322% 77.0922%, 57.6271% 75.3821%, 59.322% 73.75%, 61.017% 72.2138%, 62.7119% 70.7902%, 64.4068% 69.495%, 66.1017% 68.3422%, 67.7966% 67.3446%, 69.4915% 66.513%, 71.1864% 65.8565%, 72.8814% 65.3824%, 74.5763% 65.0959%, 76.2712% 65%, 77.9661% 65.0959%, 79.661% 65.3824%, 81.3559% 65.8565%, 83.0509% 66.513%, 84.7458% 67.3446%, 86.4407% 68.3422%, 88.1356% 69.495%, 89.8305% 70.7902%, 91.5254% 72.2138%, 93.2203% 73.75%, 94.9153% 75.3821%, 96.6102% 77.0922%, 98.3051% 78.8616%, 100% 80.6708%, 100% 0%); shape-outside: polygon(0% 0%, 0% 82.5%, 1.69492% 84.3293%, 3.38983% 86.1385%, 5.08475% 87.9078%, 6.77966% 89.6179%, 8.47458% 91.25%, 10.1695% 92.7862%, 11.8644% 94.2098%, 13.5593% 95.505%, 15.2542% 96.6578%, 16.9492% 97.6555%, 18.6441% 98.487%, 20.339% 99.1435%, 22.0339% 99.6176%, 23.7288% 99.9041%, 25.4237% 100%, 27.1186% 99.9041%, 28.8136% 99.6176%, 30.5085% 99.1435%, 32.2034% 98.487%, 33.8983% 97.6555%, 35.5932% 96.6578%, 37.2881% 95.505%, 38.9831% 94.2098%, 40.678% 92.7862%, 42.3729% 91.25%, 44.0678% 89.6179%, 45.7627% 87.9078%, 47.4576% 86.1385%, 49.1525% 84.3293%, 50.8475% 82.5%, 52.5424% 80.6708%, 54.2373% 78.8616%, 55.9322% 77.0922%, 57.6271% 75.3821%, 59.322% 73.75%, 61.017% 72.2138%, 62.7119% 70.7902%, 64.4068% 69.495%, 66.1017% 68.3422%, 67.7966% 67.3446%, 69.4915% 66.513%, 71.1864% 65.8565%, 72.8814% 65.3824%, 74.5763% 65.0959%, 76.2712% 65%, 77.9661% 65.0959%, 79.661% 65.3824%, 81.3559% 65.8565%, 83.0509% 66.513%, 84.7458% 67.3446%, 86.4407% 68.3422%, 88.1356% 69.495%, 89.8305% 70.7902%, 91.5254% 72.2138%, 93.2203% 73.75%, 94.9153% 75.3821%, 96.6102% 77.0922%, 98.3051% 78.8616%, 100% 80.6708%, 100% 0%)\n \n}\n.product-card-content{\npadding-right:20px!important;\n padding-left:20px!important;\n}\n.product-card-image-column{\n clip-path: polygon(0% 0%, 0% 82.5%, 1.69492% 84.3293%, 3.38983% 86.1385%, 5.08475% 87.9078%, 6.77966% 89.6179%, 8.47458% 91.25%, 10.1695% 92.7862%, 11.8644% 94.2098%, 13.5593% 95.505%, 15.2542% 96.6578%, 16.9492% 97.6555%, 18.6441% 98.487%, 20.339% 99.1435%, 22.0339% 99.6176%, 23.7288% 99.9041%, 25.4237% 100%, 27.1186% 99.9041%, 28.8136% 99.6176%, 30.5085% 99.1435%, 32.2034% 98.487%, 33.8983% 97.6555%, 35.5932% 96.6578%, 37.2881% 95.505%, 38.9831% 94.2098%, 40.678% 92.7862%, 42.3729% 91.25%, 44.0678% 89.6179%, 45.7627% 87.9078%, 47.4576% 86.1385%, 49.1525% 84.3293%, 50.8475% 82.5%, 52.5424% 80.6708%, 54.2373% 78.8616%, 55.9322% 77.0922%, 57.6271% 75.3821%, 59.322% 73.75%, 61.017% 72.2138%, 62.7119% 70.7902%, 64.4068% 69.495%, 66.1017% 68.3422%, 67.7966% 67.3446%, 69.4915% 66.513%, 71.1864% 65.8565%, 72.8814% 65.3824%, 74.5763% 65.0959%, 76.2712% 65%, 77.9661% 65.0959%, 79.661% 65.3824%, 81.3559% 65.8565%, 83.0509% 66.513%, 84.7458% 67.3446%, 86.4407% 68.3422%, 88.1356% 69.495%, 89.8305% 70.7902%, 91.5254% 72.2138%, 93.2203% 73.75%, 94.9153% 75.3821%, 96.6102% 77.0922%, 98.3051% 78.8616%, 100% 80.6708%, 100% 0%); shape-outside: polygon(0% 0%, 0% 82.5%, 1.69492% 84.3293%, 3.38983% 86.1385%, 5.08475% 87.9078%, 6.77966% 89.6179%, 8.47458% 91.25%, 10.1695% 92.7862%, 11.8644% 94.2098%, 13.5593% 95.505%, 15.2542% 96.6578%, 16.9492% 97.6555%, 18.6441% 98.487%, 20.339% 99.1435%, 22.0339% 99.6176%, 23.7288% 99.9041%, 25.4237% 100%, 27.1186% 99.9041%, 28.8136% 99.6176%, 30.5085% 99.1435%, 32.2034% 98.487%, 33.8983% 97.6555%, 35.5932% 96.6578%, 37.2881% 95.505%, 38.9831% 94.2098%, 40.678% 92.7862%, 42.3729% 91.25%, 44.0678% 89.6179%, 45.7627% 87.9078%, 47.4576% 86.1385%, 49.1525% 84.3293%, 50.8475% 82.5%, 52.5424% 80.6708%, 54.2373% 78.8616%, 55.9322% 77.0922%, 57.6271% 75.3821%, 59.322% 73.75%, 61.017% 72.2138%, 62.7119% 70.7902%, 64.4068% 69.495%, 66.1017% 68.3422%, 67.7966% 67.3446%, 69.4915% 66.513%, 71.1864% 65.8565%, 72.8814% 65.3824%, 74.5763% 65.0959%, 76.2712% 65%, 77.9661% 65.0959%, 79.661% 65.3824%, 81.3559% 65.8565%, 83.0509% 66.513%, 84.7458% 67.3446%, 86.4407% 68.3422%, 88.1356% 69.495%, 89.8305% 70.7902%, 91.5254% 72.2138%, 93.2203% 73.75%, 94.9153% 75.3821%, 96.6102% 77.0922%, 98.3051% 78.8616%, 100% 80.6708%, 100% 0%);\n border-radius:10px;\n}"} -->
<div class="wp-block-column is-vertically-aligned-center ticss-7a1f73e9 product-card" style="padding-right:var(--wp--preset--spacing--80);padding-left:var(--wp--preset--spacing--80)"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"backgroundColor":"primary","className":"product-card-image-column"} -->
<div class="wp-block-column product-card-image-column has-primary-background-color has-background"><!-- wp:image {"id":229,"sizeSlug":"large","linkDestination":"none","className":"product-card-image"} -->
<figure class="wp-block-image size-large product-card-image"><img src="https://csscrafter.com/wp-content/uploads/2023/08/wise-me-1024x538.webp" alt="" class="wp-image-229"/></figure>
<!-- /wp:image -->
<!-- wp:spacer {"height":"10px"} -->
<div style="height:10px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- wp:group {"className":"product-card-content","layout":{"type":"constrained"}} -->
<div class="wp-block-group product-card-content"><!-- wp:heading -->
<h2 class="wp-block-heading" id="card-with-multi-shadow">Card with Multi Shadow</h2>
<!-- /wp:heading -->
<!-- wp:heading {"textColor":"button"} -->
<h2 class="wp-block-heading has-button-color has-text-color" id="usd-99">USD 99</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>CSScrafter is here for you to create various items with Shadow</p>
<!-- /wp:paragraph -->
<!-- wp:list {"backgroundColor":"custom-dark-blue-2","textColor":"contrastcolor","className":"lists3 ticss-6f0b5036","hasCustomCSS":true,"customCSS":" .lists3 {\n list-style-image: url(\u0022https://csscrafter.com/wp-content/uploads/2023/09/leaf-list-icon-3.png\u0022);\nmargin:6px;}\n"} -->
<ul class="lists3 ticss-6f0b5036 has-contrastcolor-color has-custom-dark-blue-2-background-color has-text-color has-background"><!-- wp:list-item {"className":"lists2-items"} -->
<li class="lists2-items">CSS Blocks</li>
<!-- /wp:list-item -->
<!-- wp:list-item {"className":"lists-items"} -->
<li class="lists-items">CSS Image</li>
<!-- /wp:list-item -->
<!-- wp:list-item {"className":"lists-items"} -->
<li class="lists-items">CSS Cards</li>
<!-- /wp:list-item -->
<!-- wp:list-item {"className":"lists-items"} -->
<li class="lists-items">CSS Particles</li>
<!-- /wp:list-item -->
<!-- wp:list-item {"className":"lists-items"} -->
<li class="lists-items">CSS lists items</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"textColor":"button","className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-button-color has-text-color wp-element-button" href="#">Buy Now →</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->You will need Block CSS plugin by Themeisle to get the exact block syle.
If you need only the CSS code here it is ↓
.product-card{
margin:0px;
background:#10172A;
padding-right:0px!important;
padding-left:0px!important;
padding-bottom:20px;
height: 100%;
border-bottom-width: 10px!important;
border-color: red!important;
border-radius:10px;
box-shadow: 5px 5px 15px white;
}
.product-card-image{
overflow:hidden;
border-radius:10px!important;
width:100%;
margin:0px;
clip-path: polygon(0% 0%, 0% 82.5%, 1.69492% 84.3293%, 3.38983% 86.1385%, 5.08475% 87.9078%, 6.77966% 89.6179%, 8.47458% 91.25%, 10.1695% 92.7862%, 11.8644% 94.2098%, 13.5593% 95.505%, 15.2542% 96.6578%, 16.9492% 97.6555%, 18.6441% 98.487%, 20.339% 99.1435%, 22.0339% 99.6176%, 23.7288% 99.9041%, 25.4237% 100%, 27.1186% 99.9041%, 28.8136% 99.6176%, 30.5085% 99.1435%, 32.2034% 98.487%, 33.8983% 97.6555%, 35.5932% 96.6578%, 37.2881% 95.505%, 38.9831% 94.2098%, 40.678% 92.7862%, 42.3729% 91.25%, 44.0678% 89.6179%, 45.7627% 87.9078%, 47.4576% 86.1385%, 49.1525% 84.3293%, 50.8475% 82.5%, 52.5424% 80.6708%, 54.2373% 78.8616%, 55.9322% 77.0922%, 57.6271% 75.3821%, 59.322% 73.75%, 61.017% 72.2138%, 62.7119% 70.7902%, 64.4068% 69.495%, 66.1017% 68.3422%, 67.7966% 67.3446%, 69.4915% 66.513%, 71.1864% 65.8565%, 72.8814% 65.3824%, 74.5763% 65.0959%, 76.2712% 65%, 77.9661% 65.0959%, 79.661% 65.3824%, 81.3559% 65.8565%, 83.0509% 66.513%, 84.7458% 67.3446%, 86.4407% 68.3422%, 88.1356% 69.495%, 89.8305% 70.7902%, 91.5254% 72.2138%, 93.2203% 73.75%, 94.9153% 75.3821%, 96.6102% 77.0922%, 98.3051% 78.8616%, 100% 80.6708%, 100% 0%); shape-outside: polygon(0% 0%, 0% 82.5%, 1.69492% 84.3293%, 3.38983% 86.1385%, 5.08475% 87.9078%, 6.77966% 89.6179%, 8.47458% 91.25%, 10.1695% 92.7862%, 11.8644% 94.2098%, 13.5593% 95.505%, 15.2542% 96.6578%, 16.9492% 97.6555%, 18.6441% 98.487%, 20.339% 99.1435%, 22.0339% 99.6176%, 23.7288% 99.9041%, 25.4237% 100%, 27.1186% 99.9041%, 28.8136% 99.6176%, 30.5085% 99.1435%, 32.2034% 98.487%, 33.8983% 97.6555%, 35.5932% 96.6578%, 37.2881% 95.505%, 38.9831% 94.2098%, 40.678% 92.7862%, 42.3729% 91.25%, 44.0678% 89.6179%, 45.7627% 87.9078%, 47.4576% 86.1385%, 49.1525% 84.3293%, 50.8475% 82.5%, 52.5424% 80.6708%, 54.2373% 78.8616%, 55.9322% 77.0922%, 57.6271% 75.3821%, 59.322% 73.75%, 61.017% 72.2138%, 62.7119% 70.7902%, 64.4068% 69.495%, 66.1017% 68.3422%, 67.7966% 67.3446%, 69.4915% 66.513%, 71.1864% 65.8565%, 72.8814% 65.3824%, 74.5763% 65.0959%, 76.2712% 65%, 77.9661% 65.0959%, 79.661% 65.3824%, 81.3559% 65.8565%, 83.0509% 66.513%, 84.7458% 67.3446%, 86.4407% 68.3422%, 88.1356% 69.495%, 89.8305% 70.7902%, 91.5254% 72.2138%, 93.2203% 73.75%, 94.9153% 75.3821%, 96.6102% 77.0922%, 98.3051% 78.8616%, 100% 80.6708%, 100% 0%)
}
.product-card-content{
padding-right:20px!important;
padding-left:20px!important;
}
.product-card-image-column{
clip-path: polygon(0% 0%, 0% 82.5%, 1.69492% 84.3293%, 3.38983% 86.1385%, 5.08475% 87.9078%, 6.77966% 89.6179%, 8.47458% 91.25%, 10.1695% 92.7862%, 11.8644% 94.2098%, 13.5593% 95.505%, 15.2542% 96.6578%, 16.9492% 97.6555%, 18.6441% 98.487%, 20.339% 99.1435%, 22.0339% 99.6176%, 23.7288% 99.9041%, 25.4237% 100%, 27.1186% 99.9041%, 28.8136% 99.6176%, 30.5085% 99.1435%, 32.2034% 98.487%, 33.8983% 97.6555%, 35.5932% 96.6578%, 37.2881% 95.505%, 38.9831% 94.2098%, 40.678% 92.7862%, 42.3729% 91.25%, 44.0678% 89.6179%, 45.7627% 87.9078%, 47.4576% 86.1385%, 49.1525% 84.3293%, 50.8475% 82.5%, 52.5424% 80.6708%, 54.2373% 78.8616%, 55.9322% 77.0922%, 57.6271% 75.3821%, 59.322% 73.75%, 61.017% 72.2138%, 62.7119% 70.7902%, 64.4068% 69.495%, 66.1017% 68.3422%, 67.7966% 67.3446%, 69.4915% 66.513%, 71.1864% 65.8565%, 72.8814% 65.3824%, 74.5763% 65.0959%, 76.2712% 65%, 77.9661% 65.0959%, 79.661% 65.3824%, 81.3559% 65.8565%, 83.0509% 66.513%, 84.7458% 67.3446%, 86.4407% 68.3422%, 88.1356% 69.495%, 89.8305% 70.7902%, 91.5254% 72.2138%, 93.2203% 73.75%, 94.9153% 75.3821%, 96.6102% 77.0922%, 98.3051% 78.8616%, 100% 80.6708%, 100% 0%); shape-outside: polygon(0% 0%, 0% 82.5%, 1.69492% 84.3293%, 3.38983% 86.1385%, 5.08475% 87.9078%, 6.77966% 89.6179%, 8.47458% 91.25%, 10.1695% 92.7862%, 11.8644% 94.2098%, 13.5593% 95.505%, 15.2542% 96.6578%, 16.9492% 97.6555%, 18.6441% 98.487%, 20.339% 99.1435%, 22.0339% 99.6176%, 23.7288% 99.9041%, 25.4237% 100%, 27.1186% 99.9041%, 28.8136% 99.6176%, 30.5085% 99.1435%, 32.2034% 98.487%, 33.8983% 97.6555%, 35.5932% 96.6578%, 37.2881% 95.505%, 38.9831% 94.2098%, 40.678% 92.7862%, 42.3729% 91.25%, 44.0678% 89.6179%, 45.7627% 87.9078%, 47.4576% 86.1385%, 49.1525% 84.3293%, 50.8475% 82.5%, 52.5424% 80.6708%, 54.2373% 78.8616%, 55.9322% 77.0922%, 57.6271% 75.3821%, 59.322% 73.75%, 61.017% 72.2138%, 62.7119% 70.7902%, 64.4068% 69.495%, 66.1017% 68.3422%, 67.7966% 67.3446%, 69.4915% 66.513%, 71.1864% 65.8565%, 72.8814% 65.3824%, 74.5763% 65.0959%, 76.2712% 65%, 77.9661% 65.0959%, 79.661% 65.3824%, 81.3559% 65.8565%, 83.0509% 66.513%, 84.7458% 67.3446%, 86.4407% 68.3422%, 88.1356% 69.495%, 89.8305% 70.7902%, 91.5254% 72.2138%, 93.2203% 73.75%, 94.9153% 75.3821%, 96.6102% 77.0922%, 98.3051% 78.8616%, 100% 80.6708%, 100% 0%);
border-radius:10px;
}CSS credit – CSScrafter
Info Card Style –
CSScrafter
CSScrafter is here for you to create various items with CSS and Gutenberg Blocks. You will find interesting readymade blocks for your website.
Visit Here →
To get the Block or CSS, click here ⥅
Copy the Block from and paste in your editor ↓
<!-- wp:columns {"style":{"spacing":{"padding":{"right":"var:preset|spacing|80","left":"var:preset|spacing|80"},"blockGap":{"left":"0"}}},"className":"","hasCustomCSS":true} -->
<div class="wp-block-columns" style="padding-right:var(--wp--preset--spacing--80);padding-left:var(--wp--preset--spacing--80)"><!-- wp:column {"verticalAlignment":"center","style":{"spacing":{"padding":{"right":"var:preset|spacing|80","left":"var:preset|spacing|80"}}},"className":"info-card ticss-b7354f95","hasCustomCSS":true,"customCSS":".info-card {\n border-radius:10px;\n}\n.info-card-heading{\n padding:50px 0px 50px 50px!important;\n border-radius:10px;\n}\n.info-card-content{\n margin-top:-20px!important;\nborder-bottom-left-radius: 20px;\n border-bottom-right-radius: 20px;\n padding-left:50px!important;\n cursor:pointer;\n}\n"} -->
<div class="wp-block-column is-vertically-aligned-center info-card ticss-b7354f95" style="padding-right:var(--wp--preset--spacing--80);padding-left:var(--wp--preset--spacing--80)"><!-- wp:heading {"style":{"color":{"background":"#034a5b"},"typography":{"fontSize":"25px","textTransform":"uppercase"}},"className":"info-card-heading"} -->
<h2 class="wp-block-heading info-card-heading has-background" id="csscrafter" style="background-color:#034a5b;font-size:25px;text-transform:uppercase">CSScrafter</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"backgroundColor":"textonprimary","textColor":"custom-dark-blue-2","className":"info-card-content"} -->
<p class="info-card-content has-custom-dark-blue-2-color has-textonprimary-background-color has-text-color has-background">CSScrafter is here for you to create various items with CSS and Gutenberg Blocks. You will find interesting readymade blocks for your website. </p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"style":{"color":{"text":"#034a5b"},"typography":{"fontSize":"15px"}},"backgroundColor":"textonprimary","className":"info-card-content"} -->
<p class="info-card-content has-textonprimary-background-color has-text-color has-background" style="color:#034a5b;font-size:15px"><strong><em>Visit Here →</em></strong><br></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->You will need Block CSS plugin by Themeisle to get the exact block syle.
If you need only the CSS code here it is ↓
.info-card {
border-radius:10px;
}
.info-card-heading{
padding:50px 0px 50px 50px!important;
border-radius:10px;
}
.info-card-content{
margin-top:-20px!important;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
padding-left:50px!important;
cursor:pointer;
}
CSS credit – CSScrafter
Info Card Hotel Booking Style –
Hotel Room
Florida, USA
$ 69.00
/ per night
Free Wifi
Book Now
→
To get the Block or CSS, click here ⥅
Copy the Block from and paste in your editor ↓
<!-- wp:columns {"style":{"spacing":{"padding":{"right":"var:preset|spacing|80","left":"var:preset|spacing|80"},"blockGap":{"left":"0"}}},"backgroundColor":"custom-dark-neviblue","className":"info-booking-card ticss-09e0da2d","hasCustomCSS":true,"customCSS":".info-booking-card{\n padding:0px!important;\n border-radius:10px;\n box-shadow: 2px 2px 10px 2px rgba(245, 240, 240, 0.2);\n}\n.info-booking-card-image-column{\n background-image:url(https://csscrafter.com/wp-content/uploads/2023/09/hotelroom-683x1024.webp);\n background-size: cover;\n background-repeat: no-repeat;\n width:100%;\n height:100%;\n border-top-left-radius:10px!important;\n border-bottom-left-radius:10px!important;\n overflow:hidden;\n}\n\n.info-booking-card-content{\n padding-left:20px!important;\n}\n.info-booking-card-heading{\n padding-top:10px;\n}\n.info-booking-card-location{\n margin-top:-10px!important;\n}\n.info-booking-card-location-address{\n margin-left:-25px!important;\n margin-top:-10px!important;\n}\n.info-booking-card-pricing{\n margin-top:-15px!important;\n}\n.info-booking-card-btn{\n padding:18px;\n margin-top:-17px!important;\n border-bottom-right-radius:10px!important;\n cursor:pointer;\n}\n.info-booking-card-btn:hover{\n background-color:#182545!important;\n}"} -->
<div class="wp-block-columns info-booking-card ticss-09e0da2d has-custom-dark-neviblue-background-color has-background" style="padding-right:var(--wp--preset--spacing--80);padding-left:var(--wp--preset--spacing--80)"><!-- wp:column {"width":"33.33%","className":"info-booking-card-image-column"} -->
<div class="wp-block-column info-booking-card-image-column" style="flex-basis:33.33%"><!-- wp:spacer {"height":"332px"} -->
<div style="height:332px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:column -->
<!-- wp:column {"width":"66.66%","className":"info-booking-card-content-group-column"} -->
<div class="wp-block-column info-booking-card-content-group-column" style="flex-basis:66.66%"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:group {"className":"info-booking-card-content","layout":{"type":"constrained"}} -->
<div class="wp-block-group info-booking-card-content"><!-- wp:heading {"className":"info-booking-card-heading"} -->
<h2 class="wp-block-heading info-booking-card-heading" id="hotel-room">Hotel Room</h2>
<!-- /wp:heading -->
<!-- wp:group {"className":"info-booking-card-location","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"left"}} -->
<div class="wp-block-group info-booking-card-location"><!-- wp:image {"id":429,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://csscrafter.com/wp-content/uploads/2023/09/pin-list-icon-10.png" alt="" class="wp-image-429"/></figure>
<!-- /wp:image -->
<!-- wp:paragraph {"style":{"typography":{"fontSize":"13px"}},"textColor":"lightgrey","className":"info-booking-card-location-address"} -->
<p class="info-booking-card-location-address has-lightgrey-color has-text-color" style="font-size:13px">Florida, USA</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- wp:group {"className":"info-booking-card-pricing","layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group info-booking-card-pricing"><!-- wp:paragraph {"style":{"typography":{"fontSize":"64px"}}} -->
<p style="font-size:64px">$ 69.00</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"textColor":"lightgrey"} -->
<p class="has-lightgrey-color has-text-color">/ per night</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- wp:group {"className":"info-booking-card-pricing","layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group info-booking-card-pricing"><!-- wp:image {"id":473,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://csscrafter.com/wp-content/uploads/2023/09/wifi.png" alt="" class="wp-image-473"/></figure>
<!-- /wp:image -->
<!-- wp:paragraph {"style":{"typography":{"fontSize":"18px"}},"textColor":"lightgrey"} -->
<p class="has-lightgrey-color has-text-color" style="font-size:18px">Free Wifi</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
<!-- wp:group {"style":{"color":{"background":"#1e3149"}},"className":"info-booking-card-btn","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
<div class="wp-block-group info-booking-card-btn has-background" style="background-color:#1e3149"><!-- wp:paragraph -->
<p>Book Now</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>→</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->You will need Block CSS plugin by Themeisle to get the exact block syle.
If you need only the CSS code here it is ↓
.info-booking-card{
padding:0px!important;
border-radius:10px;
box-shadow: 2px 2px 10px 2px rgba(245, 240, 240, 0.2);
}
.info-booking-card-image-column{
background-image:url(https://csscrafter.com/wp-content/uploads/2023/09/hotelroom-683x1024.webp);
background-size: cover;
background-repeat: no-repeat;
width:100%;
height:100%;
border-top-left-radius:10px!important;
border-bottom-left-radius:10px!important;
overflow:hidden;
}
.info-booking-card-content{
padding-left:20px!important;
}
.info-booking-card-heading{
padding-top:10px;
}
.info-booking-card-location{
margin-top:-10px!important;
}
.info-booking-card-location-address{
margin-left:-25px!important;
margin-top:-10px!important;
}
.info-booking-card-pricing{
margin-top:-15px!important;
}
.info-booking-card-btn{
padding:18px;
margin-top:-17px!important;
border-bottom-right-radius:10px!important;
cursor:pointer;
}
.info-booking-card-btn:hover{
background-color:#182545!important;
}CSS credit – CSScrafter & design inspiration Matt
Product Info Card Style –
Indoor
Peace Lily
Outdoor
Monstera
Outdoor
Oak Tree
To get the Block or CSS, click here ⥅
Copy the Block from and paste in your editor ↓
<!-- wp:columns {"verticalAlignment":"center","align":"wide","style":{"spacing":{"padding":{"right":"var:preset|spacing|80","left":"var:preset|spacing|80"},"blockGap":{"left":"var:preset|spacing|20"}}},"backgroundColor":"custom-dark-neviblue","className":"","hasCustomCSS":true} -->
<div class="wp-block-columns alignwide are-vertically-aligned-center has-custom-dark-neviblue-background-color has-background" style="padding-right:var(--wp--preset--spacing--80);padding-left:var(--wp--preset--spacing--80)"><!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:cover {"url":"https://csscrafter.com/wp-content/uploads/2023/09/shaped.png","id":476,"dimRatio":80,"customOverlayColor":"#ff7c10","isDark":false,"style":{"border":{"radius":"15px"}},"className":"is-style-default ticss-464e4dde","layout":{"type":"constrained"},"hasCustomCSS":true,"customCSS":".lili-card-name{\nmargin-top:0px!important;\n}"} -->
<div class="wp-block-cover is-light is-style-default ticss-464e4dde" style="border-radius:15px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-80 has-background-dim" style="background-color:#ff7c10"></span><img class="wp-block-cover__image-background wp-image-476" alt="" src="https://csscrafter.com/wp-content/uploads/2023/09/shaped.png" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:image {"align":"center","id":477,"width":169,"height":194,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image aligncenter size-full is-resized"><img src="https://csscrafter.com/wp-content/uploads/2023/09/peace-lily.png" alt="" class="wp-image-477" style="width:169px;height:194px" width="169" height="194"/></figure>
<!-- /wp:image -->
<!-- wp:columns {"verticalAlignment":"center"} -->
<div class="wp-block-columns are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center","width":"66.66%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:66.66%"><!-- wp:paragraph {"style":{"color":{"text":"#ffffffb8"}}} -->
<p class="has-text-color" style="color:#ffffffb8">Indoor</p>
<!-- /wp:paragraph -->
<!-- wp:heading {"style":{"typography":{"fontSize":"27px"}},"textColor":"contrastcolor","className":"lili-card-name"} -->
<h2 class="wp-block-heading lili-card-name has-contrastcolor-color has-text-color" id="peace-lily" style="font-size:27px">Peace Lily</h2>
<!-- /wp:heading --></div>
<!-- /wp:column -->
<!-- wp:column {"verticalAlignment":"center","width":"33.33%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:33.33%"><!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"contrastcolor","width":100,"style":{"color":{"text":"#ff7c10"},"border":{"radius":"13px"},"spacing":{"padding":{"left":"17px","right":"17px","top":"4px","bottom":"4px"}}}} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100"><a class="wp-block-button__link has-contrastcolor-background-color has-text-color has-background wp-element-button" href="#" style="border-radius:13px;color:#ff7c10;padding-top:4px;padding-right:17px;padding-bottom:4px;padding-left:17px"><strong>$39</strong></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:column -->
<!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:cover {"url":"https://csscrafter.com/wp-content/uploads/2023/09/shaped.png","id":476,"dimRatio":80,"customOverlayColor":"#38b2ac","isDark":false,"style":{"border":{"radius":"15px"}},"className":"is-style-default ticss-464e4dde","layout":{"type":"constrained"},"hasCustomCSS":true,"customCSS":".lili-card-name{\nmargin-top:0px!important;\n}"} -->
<div class="wp-block-cover is-light is-style-default ticss-464e4dde" style="border-radius:15px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-80 has-background-dim" style="background-color:#38b2ac"></span><img class="wp-block-cover__image-background wp-image-476" alt="" src="https://csscrafter.com/wp-content/uploads/2023/09/shaped.png" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:image {"align":"center","id":478,"width":169,"height":194,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image aligncenter size-full is-resized"><img src="https://csscrafter.com/wp-content/uploads/2023/09/monsetra.png" alt="" class="wp-image-478" style="width:169px;height:194px" width="169" height="194"/></figure>
<!-- /wp:image -->
<!-- wp:columns {"verticalAlignment":"center"} -->
<div class="wp-block-columns are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center","width":"66.66%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:66.66%"><!-- wp:paragraph {"style":{"color":{"text":"#ffffffb8"}}} -->
<p class="has-text-color" style="color:#ffffffb8">Outdoor</p>
<!-- /wp:paragraph -->
<!-- wp:heading {"style":{"typography":{"fontSize":"27px"}},"textColor":"contrastcolor","className":"lili-card-name"} -->
<h2 class="wp-block-heading lili-card-name has-contrastcolor-color has-text-color" id="peace-lily" style="font-size:27px">Monstera</h2>
<!-- /wp:heading --></div>
<!-- /wp:column -->
<!-- wp:column {"verticalAlignment":"center","width":"33.33%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:33.33%"><!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"contrastcolor","width":100,"style":{"color":{"text":"#ff7c10"},"border":{"radius":"13px"},"spacing":{"padding":{"left":"17px","right":"17px","top":"4px","bottom":"4px"}}}} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100"><a class="wp-block-button__link has-contrastcolor-background-color has-text-color has-background wp-element-button" href="#" style="border-radius:13px;color:#ff7c10;padding-top:4px;padding-right:17px;padding-bottom:4px;padding-left:17px"><strong>$45</strong></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:column -->
<!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:cover {"url":"https://csscrafter.com/wp-content/uploads/2023/09/shaped.png","id":476,"dimRatio":80,"customOverlayColor":"#9f7aea","isDark":false,"style":{"border":{"radius":"15px"}},"className":"is-style-default ticss-464e4dde","layout":{"type":"constrained"},"hasCustomCSS":true,"customCSS":".lili-card-name{\nmargin-top:0px!important;\n}"} -->
<div class="wp-block-cover is-light is-style-default ticss-464e4dde" style="border-radius:15px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-80 has-background-dim" style="background-color:#9f7aea"></span><img class="wp-block-cover__image-background wp-image-476" alt="" src="https://csscrafter.com/wp-content/uploads/2023/09/shaped.png" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:image {"align":"center","id":477,"width":169,"height":194,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image aligncenter size-full is-resized"><img src="https://csscrafter.com/wp-content/uploads/2023/09/peace-lily.png" alt="" class="wp-image-477" style="width:169px;height:194px" width="169" height="194"/></figure>
<!-- /wp:image -->
<!-- wp:columns {"verticalAlignment":"center"} -->
<div class="wp-block-columns are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center","width":"66.66%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:66.66%"><!-- wp:paragraph {"style":{"color":{"text":"#ffffffb8"}}} -->
<p class="has-text-color" style="color:#ffffffb8">Outdoor</p>
<!-- /wp:paragraph -->
<!-- wp:heading {"style":{"typography":{"fontSize":"27px"}},"textColor":"contrastcolor","className":"lili-card-name"} -->
<h2 class="wp-block-heading lili-card-name has-contrastcolor-color has-text-color" id="peace-lily" style="font-size:27px">Oak Tree</h2>
<!-- /wp:heading --></div>
<!-- /wp:column -->
<!-- wp:column {"verticalAlignment":"center","width":"33.33%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:33.33%"><!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"contrastcolor","width":100,"style":{"color":{"text":"#ff7c10"},"border":{"radius":"13px"},"spacing":{"padding":{"left":"17px","right":"17px","top":"4px","bottom":"4px"}}}} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100"><a class="wp-block-button__link has-contrastcolor-background-color has-text-color has-background wp-element-button" href="#" style="border-radius:13px;color:#ff7c10;padding-top:4px;padding-right:17px;padding-bottom:4px;padding-left:17px"><strong>$68</strong></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->You will need Block CSS plugin by Themeisle to get the exact block syle.
If you need only the CSS code here it is ↓
/* No CSS for over all items, only decreasing the content gap*/
.lili-card-name{
margin-top:0px!important;
}CSS credit – CSScrafter & Design inspiration r3oath
Grab Your CSS Styles Here
Get All CSS Items In One Place
If you want to get all CSS items in one place, then visit here. We have added all the items listed there, and you will get all the resources of CSScrafter for free in one place.