Text Break on CSS Hover Effects

Learn how to create Text break on hover css effects using only custom css. This tutorial is very helpful for a web designer. This css hover effects very easy to implement on any type of website.

You can check the live demo or also download the source file. Change the all color as your like website. If you want more details about this css effects then visit here. My previous tutorial check and learn how to create CSS Revealing Text Animation Effects.

HTML

<h1 name="CSSPOINT">CSSSPOINT</h1>

CSS

body {
	margin: 0;
	padding: 0;
	background: #262626;
}
h1 {
	margin: 0;
	padding: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	text-transform: uppercase;
	transform: translate(-50%, -50%);
	color: transparent;
	font-family: "arial black";
	font-size: 5em;
}
h1:before, h1:after {
	content: attr(name);
	color: #eb2f06;
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	transition: .3s;
}
h1:before {
	-webkit-clip-path: polygon(55% 0, 0 0, 0 100%, 35% 100%);
	clip-path: polygon(55% 0, 0 0, 0 100%, 35% 100%);
}
h1:after {
	-webkit-clip-path: polygon(55% 0, 100% 0, 100% 100%, 35% 100%);
}
h1:hover:before {
	top: -5px;
	left: -10px;
	transform: rotate(-5deg);
}
h1:hover:after {
	top: 5px;
	left: 10px;
	transform: rotate(5deg);
}

10 Comments

  1. This is really amazing text break animation. I love it

  2. […] If you want to know more or if you would like more effects then you can visit here. And you can also check my another tutorial on how to create Text Break Effects On Hover. […]

  3. Congratulations!!
    You’re doing a great job.
    This is so informative, keep on.
    I’m very grateful.

  4. Wow this is really neat stuff. I think that a lot of people could use this service.

  5. I love your blog.. very nice colors & theme. Did you create this website yourself or did you hire
    someone to do it for you? Plz answer back as I’m
    looking to design my own blog and would like to know where u got
    this from. cheers

  6. Thanx for the effort, keep up the good work Great work, I am going to start a small Blog Engine course work using your site I hope you enjoy blogging with the popular BlogEngine.net.Thethoughts you express are really awesome. Hope you will right some more posts.

  7. Wow, great blog post. Awesome.

Leave a Reply