Home Web Development JavaScript Flex Hover Slider Using jQuery and CSS | Tab Panel Hover Slider

Flex Hover Slider Using jQuery and CSS | Tab Panel Hover Slider

January 20, 2020

7300

How we can create a panel slider which slides on hover using HTML CSS JS? Solution: See this Flex Hover Slider Using jQuery and CSS, Tab Panel Hover Slider.

Previously I have shared some hover slider and a panel slider programs, but this is a combination of both it is a panel hover slider. Basically, the slider works automatically and on click, but hover slider slide items only on mouseover. And a panel slider contains multi-panel with items, when you will select any panel then it will expand and show its content. Suppose we have a box and 3 panels inside it with equal width, when you will choose or select a panel then it will expand and others width will decrease.

Today you will learn to create Tab Panel Hover Slider. Basically, there are 4 panels with equal width and each panel contains its own contents. When you will hover on any panel then it will expand and will show the contents of its. Each panel has a background image, there are sections of website like home, about, contact, etc. Also it a responsive slider, it will align up to down on small screen size devices.

So, Today I am sharing Flex Hover Slider Using jQuery and CSS. There I have used CSS for styling and jQuery for functioning, also there is a jQuery plugin for smooth image load. As we know jQuery is a JS library, that’s why I am putting this in the JavaScript category. This is a cool concept, that you can use on your website or project.

If you are thinking now how this hover slider actually is, then see the preview given below.

Preview Of Tab Panel Slider

See this video preview to getting an idea of how this hover panel slider looks like.

https://webdevtrick.com/wp-content/uploads/jquery-css-hover-slider.mp4?_=1

Live Demo

Now you can see this visually, also you can see it live by pressing the button given above. If you like this, then get the source code of its.

Flex Hover Slider Using jQuery and CSS Source Code

Before sharing source code, let’s talk about it. First I have created a main div named “flex-container” and placed 5 div sections inside it. 1st div section for the preloader/loading animation, and the other 4 are panels. The first 3 panels contain text and the last contact panel contains a form. Also I HTML file I have linked external files like CSS, JS, jQuery CDN, and the jQuery plugin.

Now using CSS I have placed all the elements in the right place, as you can see in the preview. I have used the @keyframe animation command to create the loader. There I have used flex display command to create the whole element. There used CSS @media query to creating responsive elements. Also, I have used transform and transition command many times.

jQuery handling here the toggle open on hover and reveal content function in this program. The first line of codes is based on the plugin which helps to smooth image load. After that, create 4 functions for title placement and reveal text. And 2 other functions for hiding contents by default. Left all other things you will understand after getting the codes, I can’t explain all in writing.

For creating this program you have to create 3 files. First file for HTML, second file for CSS, and the third file for JavaScript. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

<!DOCTYPE html>
<!--Code By Webdevtrick ( https://webdevtrick.com )-->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Flex Hover Slider | Webdevtrick.com</title>
  <link rel="stylesheet" href="style.css">

</head>
<body>

<div class="flex-container">
	<div class="spinner"><p>
		<div class="cube1"></div>
		<div class="cube2"></div>
		Loading...
		</p>
	</div>
	<div class="flex-slide home">
		<div class="flex-title flex-title-home">Home</div>
		<div class="flex-about flex-about-home"><p>Click here to navigate to the home section of the website</p></div>
	</div>
	<div class="flex-slide about">
		<div class="flex-title">About</div>
		<div class="flex-about"><p>Click here to navigate to the About section of the website</p></div>
	</div>
	<div class="flex-slide price">
		<div class="flex-title">Price</div>
		<div class="flex-about"><p>Listing relevant snippets of price:</p>
			<ul>
				<li>First piece of price</li>
				<li>Second piece of price</li>
				<li>Third piece of price</li>
			</ul>
		</div>
	</div>
	<div class="flex-slide contact">
		<div class="flex-title">Contact</div>
				<div class="flex-about">
					<p>Use the contact form below</p>
					<form class="contact-form">
						<p>Email <input type="text" name="email"></p>
						<p>Comment <textarea type="text" name="comment"></textarea></p>
						<p><input type="submit" name="email" value="Send Message"></p>
					</form>

		</div>
	</div>
</div>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.waitforimages/2.4.0/jquery.waitforimages.min.js'></script>
<script  src="function.js"></script>

</body>
</html>

<!DOCTYPE html>

<head>

<title>Flex Hover Slider | Webdevtrick.com</title>

</head>

<body>

</p>

</div>

<div class="flex-about flex-about-home"><p>Click here to navigate to the home section of the website</p></div>

</div>

<div class="flex-title">About</div>

<div class="flex-about"><p>Click here to navigate to the About section of the website</p></div>

</div>

<div class="flex-title">Price</div>

<div class="flex-about"><p>Listing relevant snippets of price:</p>

<ul>

<li>First piece of price</li>

<li>Second piece of price</li>

<li>Third piece of price</li>

</ul>

</div>

<div class="flex-title">Contact</div>

<p>Use the contact form below</p>

<p>Email <input type="text" name="email"></p>

<p>Comment <textarea type="text" name="comment"></textarea></p>

</form>

</div>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

/* Code By Webdevtrick ( https://webdevtrick.com ) */
@import url("https://fonts.googleapis.com/css?family=Raleway");
body {
  margin: 0;
  padding: 0;
  font-family: 'Raleway', sans-serif;
}

.flex-container {
  position: absolute;
  height: 100vh;
  width: 100%;
  display: -webkit-flex;
  /* Safari */
  display: flex;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .flex-container {
    flex-direction: column;
  }
}

.flex-title {
  color: #f1f1f1;
  position: relative;
  font-size: 6vw;
  margin: auto;
  text-align: center;
  transform: rotate(90deg);
  top: 15%;
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
}
@media screen and (max-width: 768px) {
  .flex-title {
    transform: rotate(0deg) !important;
  }
}

.flex-about {
  opacity: 0;
  color: #f1f1f1;
  position: relative;
  width: 70%;
  font-size: 2vw;
  padding: 5%;
  top: 20%;
  border: 2px solid #f1f1f1;
  border-radius: 10px;
  line-height: 1.3;
  margin: auto;
  text-align: left;
  transform: rotate(0deg);
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
}
@media screen and (max-width: 768px) {
  .flex-about {
    padding: 0%;
    border: 0px solid #f1f1f1;
  }
}

.flex-slide {
  -webkit-flex: 1;
  /* Safari 6.1+ */
  -ms-flex: 1;
  /* IE 10 */
  flex: 1;
  cursor: pointer;
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
}
@media screen and (max-width: 768px) {
  .flex-slide {
    overflow: auto;
    overflow-x: hidden;
  }
}

@media screen and (max-width: 768px) {
  .flex-slide p {
    font-size: 2em;
  }
}

@media screen and (max-width: 768px) {
  .flex-slide ul li {
    font-size: 2em;
  }
}

.flex-slide:hover {
  -webkit-flex-grow: 3;
  flex-grow: 3;
}

.home {
  height: 100vh;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?crop=entropy&cs=srgb&dl=nature-red-forest-leaves-33109.jpg&fit=crop&fm=jpg&h=853&w=1280);
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}
@media screen and (min-width: 768px) {
  .home {
    -moz-animation: aboutFlexSlide;
    -moz-animation-duration: 3s;
    -moz-animation-iteration-count: 1;
    -moz-animation-delay: 0s;
    -webkit-animation: aboutFlexSlide;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-delay: 0s;
    animation: aboutFlexSlide;
    animation-duration: 3s;
    animation-iteration-count: 1;
    animation-delay: 0s;
  }
}

@keyframes aboutFlexSlide {
  0% {
    -webkit-flex-grow: 1;
    flex-grow: 1;
  }
  50% {
    -webkit-flex-grow: 3;
    flex-grow: 3;
  }
  100% {
    -webkit-flex-grow: 1;
    flex-grow: 1;
  }
}
@media screen and (min-width: 768px) {
  .flex-title-home {
    transform: rotate(90deg);
    top: 15%;
    -moz-animation: homeFlextitle;
    -moz-animation-duration: 3s;
    -moz-animation-iteration-count: 1;
    -moz-animation-delay: 0s;
    -webkit-animation: homeFlextitle;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-delay: 0s;
    animation: homeFlextitle;
    animation-duration: 3s;
    animation-iteration-count: 1;
    animation-delay: 0s;
  }
}

@keyframes homeFlextitle {
  0% {
    transform: rotate(90deg);
    top: 15%;
  }
  50% {
    transform: rotate(0deg);
    top: 15%;
  }
  100% {
    transform: rotate(90deg);
    top: 15%;
  }
}
.flex-about-home {
  opacity: 0;
}
@media screen and (min-width: 768px) {
  .flex-about-home {
    -moz-animation: flexAboutHome;
    -moz-animation-duration: 3s;
    -moz-animation-iteration-count: 1;
    -moz-animation-delay: 0s;
    -webkit-animation: flexAboutHome;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-delay: 0s;
    animation: flexAboutHome;
    animation-duration: 3s;
    animation-iteration-count: 1;
    animation-delay: 0s;
  }
}

@keyframes flexAboutHome {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.about {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://images.pexels.com/photos/714258/pexels-photo-714258.jpeg?crop=entropy&cs=srgb&dl=mountain-ranges-covered-in-snow-714258.jpg&fit=crop&fm=jpg&h=853&w=1280);
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}

.contact-form {
  width: 100%;
}

input {
  width: 100%;
}

textarea {
  width: 100%;
}

.contact {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://images.pexels.com/photos/1295138/pexels-photo-1295138.jpeg?crop=entropy&cs=srgb&dl=ocean-water-wave-photo-1295138.jpg&fit=crop&fm=jpg&h=720&w=1280);
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}
.contact input[type="text"] {
  border-radius: 10px;
  height: 40px;
}
.contact textarea[type="text"] {
  height: 40px;
  border-radius: 10px;
}
.contact input[type="submit"] {
  width: 150px;
  height: 40px;
  border-radius: 5px;
  background-color: orangered;
  color: white;
  font-weight: 800;
  text-align: center;
  align-content: center;
}
.price {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://images.pexels.com/photos/235807/pexels-photo-235807.jpeg?crop=entropy&cs=srgb&dl=abstract-active-ash-color-235807.jpg&fit=crop&fm=jpg&h=853&w=1280);
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}

.spinner {
  position: fixed;
  top: 0;
  left: 0;
  background: #222;
  height: 100%;
  width: 100%;
  z-index: 11;
  margin-top: 0;
  color: #fff;
  font-size: 1em;
}

.cube1, .cube2 {
  background-color: #fff;
  width: 15px;
  height: 15px;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-animation: sk-cubemove 1.8s infinite ease-in-out;
  animation: sk-cubemove 1.8s infinite ease-in-out;
}

.cube2 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

@-webkit-keyframes sk-cubemove {
  25% {
    -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
  }
  50% {
    -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
  }
  75% {
    -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
  }
  100% {
    -webkit-transform: rotate(-360deg);
  }
}
@keyframes sk-cubemove {
  25% {
    transform: translateX(42px) rotate(-90deg) scale(0.5);
    -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
  }
  50% {
    transform: translateX(42px) translateY(42px) rotate(-179deg);
    -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
  }
  50.1% {
    transform: translateX(42px) translateY(42px) rotate(-180deg);
    -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
  }
  75% {
    transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
    -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
  }
  100% {
    transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

/* Code By Webdevtrick ( https://webdevtrick.com ) */

@import url("https://fonts.googleapis.com/css?family=Raleway");

body {

margin: 0;

padding: 0;

font-family: 'Raleway', sans-serif;

}

.flex-container {

position: absolute;

height: 100vh;

width: 100%;

display: -webkit-flex;

/* Safari */

display: flex;

overflow: hidden;

}

@media screen and (max-width: 768px) {

.flex-container {

flex-direction: column;

}

.flex-title {

color: #f1f1f1;

position: relative;

font-size: 6vw;

margin: auto;

text-align: center;

transform: rotate(90deg);

top: 15%;

-webkit-transition: all 500ms ease;

-moz-transition: all 500ms ease;

-ms-transition: all 500ms ease;

-o-transition: all 500ms ease;

transition: all 500ms ease;

}

@media screen and (max-width: 768px) {

.flex-title {

transform: rotate(0deg) !important;

}

.flex-about {

opacity: 0;

color: #f1f1f1;

position: relative;

width: 70%;

font-size: 2vw;

padding: 5%;

top: 20%;

border: 2px solid #f1f1f1;

border-radius: 10px;

line-height: 1.3;

margin: auto;

text-align: left;

transform: rotate(0deg);

-webkit-transition: all 500ms ease;

-moz-transition: all 500ms ease;

-ms-transition: all 500ms ease;

-o-transition: all 500ms ease;

transition: all 500ms ease;

}

@media screen and (max-width: 768px) {

.flex-about {

padding: 0%;

border: 0px solid #f1f1f1;

}

.flex-slide {

-webkit-flex: 1;

/* Safari 6.1+ */

-ms-flex: 1;

/* IE 10 */

flex: 1;

cursor: pointer;

-webkit-transition: all 500ms ease;

-moz-transition: all 500ms ease;

-ms-transition: all 500ms ease;

-o-transition: all 500ms ease;

transition: all 500ms ease;

}

@media screen and (max-width: 768px) {

.flex-slide {

overflow: auto;

overflow-x: hidden;

}

@media screen and (max-width: 768px) {

.flex-slide p {

font-size: 2em;

}

@media screen and (max-width: 768px) {

.flex-slide ul li {

font-size: 2em;

}

.flex-slide:hover {

-webkit-flex-grow: 3;

flex-grow: 3;

}

.home {

height: 100vh;

background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?crop=entropy&cs=srgb&dl=nature-red-forest-leaves-33109.jpg&fit=crop&fm=jpg&h=853&w=1280);

background-size: cover;

background-position: center center;

background-attachment: fixed;

}

@media screen and (min-width: 768px) {

.home {

-moz-animation: aboutFlexSlide;

-moz-animation-duration: 3s;

-moz-animation-iteration-count: 1;

-moz-animation-delay: 0s;

-webkit-animation: aboutFlexSlide;

-webkit-animation-duration: 3s;

-webkit-animation-iteration-count: 1;

-webkit-animation-delay: 0s;

animation: aboutFlexSlide;

animation-duration: 3s;

animation-iteration-count: 1;

animation-delay: 0s;

}

@keyframes aboutFlexSlide {

0% {

-webkit-flex-grow: 1;

flex-grow: 1;

}

50% {

-webkit-flex-grow: 3;

flex-grow: 3;

}

100% {

-webkit-flex-grow: 1;

flex-grow: 1;

}

@media screen and (min-width: 768px) {

.flex-title-home {

transform: rotate(90deg);

top: 15%;

-moz-animation: homeFlextitle;

-moz-animation-duration: 3s;

-moz-animation-iteration-count: 1;

-moz-animation-delay: 0s;

-webkit-animation: homeFlextitle;

-webkit-animation-duration: 3s;

-webkit-animation-iteration-count: 1;

-webkit-animation-delay: 0s;

animation: homeFlextitle;

animation-duration: 3s;

animation-iteration-count: 1;

animation-delay: 0s;

}

@keyframes homeFlextitle {

0% {

transform: rotate(90deg);

top: 15%;

}

50% {

transform: rotate(0deg);

top: 15%;

}

100% {

transform: rotate(90deg);

top: 15%;

}

.flex-about-home {

opacity: 0;

}

@media screen and (min-width: 768px) {

.flex-about-home {

-moz-animation: flexAboutHome;

-moz-animation-duration: 3s;

-moz-animation-iteration-count: 1;

-moz-animation-delay: 0s;

-webkit-animation: flexAboutHome;

-webkit-animation-duration: 3s;

-webkit-animation-iteration-count: 1;

-webkit-animation-delay: 0s;

animation: flexAboutHome;

animation-duration: 3s;

animation-iteration-count: 1;

animation-delay: 0s;

}

@keyframes flexAboutHome {

0% {

opacity: 0;

}

50% {

opacity: 1;

}

100% {

opacity: 0;

}

.about {

background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://images.pexels.com/photos/714258/pexels-photo-714258.jpeg?crop=entropy&cs=srgb&dl=mountain-ranges-covered-in-snow-714258.jpg&fit=crop&fm=jpg&h=853&w=1280);

background-size: cover;

background-position: center center;

background-attachment: fixed;

}

.contact-form {

width: 100%;

}

input {

width: 100%;

}

textarea {

width: 100%;

}

.contact {

background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://images.pexels.com/photos/1295138/pexels-photo-1295138.jpeg?crop=entropy&cs=srgb&dl=ocean-water-wave-photo-1295138.jpg&fit=crop&fm=jpg&h=720&w=1280);

background-size: cover;

background-position: center center;

background-attachment: fixed;

}

.contact input[type="text"] {

border-radius: 10px;

height: 40px;

}

.contact textarea[type="text"] {

height: 40px;

border-radius: 10px;

}

.contact input[type="submit"] {

width: 150px;

height: 40px;

border-radius: 5px;

background-color: orangered;

color: white;

font-weight: 800;

text-align: center;

align-content: center;

}

.price {

background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://images.pexels.com/photos/235807/pexels-photo-235807.jpeg?crop=entropy&cs=srgb&dl=abstract-active-ash-color-235807.jpg&fit=crop&fm=jpg&h=853&w=1280);

background-size: cover;

background-position: center center;

background-attachment: fixed;

}

.spinner {

position: fixed;

top: 0;

left: 0;

background: #222;

height: 100%;

width: 100%;

z-index: 11;

margin-top: 0;

color: #fff;

font-size: 1em;

}

.cube1, .cube2 {

background-color: #fff;

width: 15px;

height: 15px;

position: absolute;

top: 0;

left: 0;

-webkit-animation: sk-cubemove 1.8s infinite ease-in-out;

animation: sk-cubemove 1.8s infinite ease-in-out;

}

.cube2 {

-webkit-animation-delay: -0.9s;

animation-delay: -0.9s;

}

@-webkit-keyframes sk-cubemove {

25% {

-webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);

}

50% {

-webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);

}

75% {

-webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);

}

100% {

-webkit-transform: rotate(-360deg);

}

@keyframes sk-cubemove {

25% {

transform: translateX(42px) rotate(-90deg) scale(0.5);

-webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);

}

50% {

transform: translateX(42px) translateY(42px) rotate(-179deg);

-webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);

}

50.1% {

transform: translateX(42px) translateY(42px) rotate(-180deg);

-webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);

}

75% {

transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);

-webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);

}

100% {

transform: rotate(-360deg);

-webkit-transform: rotate(-360deg);

}

function.js

The final step, create a JavaScript file named ‘function.js‘ and put the codes.

//Code By Webdevtrick ( https://webdevtrick.com )
(function(){
	$('.flex-container').waitForImages(function() {
		$('.spinner').fadeOut();
	}, $.noop, true);
	
	$(".flex-slide").each(function(){
		$(this).hover(function(){
			$(this).find('.flex-title').css({
				transform: 'rotate(0deg)',
				top: '10%'
			});
			$(this).find('.flex-about').css({
				opacity: '1'
			});
		}, function(){
			$(this).find('.flex-title').css({
				transform: 'rotate(90deg)',
				top: '15%'
			});
			$(this).find('.flex-about').css({
				opacity: '0'
			});
		})
	});
})();

//Code By Webdevtrick ( https://webdevtrick.com )

(function(){

$('.flex-container').waitForImages(function() {

$('.spinner').fadeOut();

}, $.noop, true);

$(".flex-slide").each(function(){

$(this).hover(function(){

$(this).find('.flex-title').css({

transform: 'rotate(0deg)',

top: '10%'

});

$(this).find('.flex-about').css({

opacity: '1'

});

}, function(){

$(this).find('.flex-title').css({

transform: 'rotate(90deg)',

top: '15%'

});

$(this).find('.flex-about').css({

opacity: '0'

});

})

});

})();

That’s It. Now you have successfully created Flex Hover Slider Using jQuery and CSS, Tab Panel Hover Slider program. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.

4 COMMENTS

joe January 22, 2020 At 2:01 am

how can i add this into my body section without covering my webpage footer? i having issue deploying this. I need to make customization too.

Reply
- shaan January 22, 2020 At 2:28 am
  
  show me your code.
  
  Reply
zeff February 18, 2020 At 2:57 pm

How can i change the photos on home contacts … etc

Reply
Julia March 3, 2022 At 12:32 pm

Can I use this with a WordPress theme? and, if so, how can I implement it to my website wp-content files?

Reply

Flex Hover Slider Using jQuery and CSS | Tab Panel Hover Slider

Preview Of Tab Panel Slider

Flex Hover Slider Using jQuery and CSS Source Code

4 COMMENTS

LEAVE A REPLY

EVEN MORE NEWS

Free PHP, HTML, CSS, JavaScript/TypeScript editor – CodeLobster IDE

Unique Uses for Blockchain Technology

JavaScript Progress Clock | Day, Hour, Minute, Second, Progression

POPULAR CATEGORY

Preview Of Tab Panel Slider

Flex Hover Slider Using jQuery and CSS Source Code

4 COMMENTS

LEAVE A REPLY Cancel reply

EVEN MORE NEWS

POPULAR CATEGORY

LEAVE A REPLY